如何使用jQuery为每个button单独设置data-prefix自定义属性值

你当前代码直接对所有匹配的button批量读取属性、批量赋值，$('[id*=ddPrefixBtn_]').data('title') 只会返回第一个匹配按钮的data-title值，之后统一赋值给所有按钮，自然所有按钮的data-prefix都完全相同。

// 封装更新按钮prefix的公共函数
function updateButtonPrefix() {
  // 拿到当前下拉框选中的prefix值
  const selectedPrefix = $('#change_service_booked').find(':selected').data('prefix');
  // 遍历每一个匹配的预约按钮
  $('[id*=ddPrefixBtn_]').each(function() {
    // 取当前按钮自身的data-title
    const btnTitle = $(this).data('title');
    // 给当前按钮单独赋值data-prefix
    // 如果你需要同步修改DOM上的属性，把.data换成.attr即可
    $(this).data('prefix', `${btnTitle} - #${selectedPrefix}`);
    // 同步修改DOM属性的写法：$(this).attr('data-prefix', `${btnTitle} - #${selectedPrefix}`);
  });

  // 原有逻辑保留
  $('.dataIdTarget').hide();
  $(`*[data-idTarget="${selectedPrefix}"]`).show();
  $(`*[data-preTarget="${selectedPrefix}"]`).show();
}

// 页面初始化时执行一次
$(document).ready(function() {
  updateButtonPrefix();
});

// 下拉框切换时重新执行更新
$('#change_service_booked').on('change', function() {
  updateButtonPrefix();
});

• 用jQuery的.each()方法遍历每一个按钮，每个按钮单独读取自身的data-title属性，避免只取第一个按钮的值
• 封装公共函数同时覆盖页面初始化、下拉切换两种场景，保证数据随时同步
• 如果后续需要直接从DOM元素上读取data-prefix属性，建议将.data('prefix')的赋值改为.attr('data-prefix')，因为jQuery的.data()方法默认只存在内存缓存中，不会修改DOM上的实际属性。

内容的提问来源于stack exchange，提问作者HCU-Memory