jQuery设置不同按钮DOM data属性值后读取返回undefined问题求助

核心问题原因 #

• 你的ID选择器写法错误：$('*#ddPrefixBtn_')是精确匹配ID为ddPrefixBtn_的元素，但实际页面内的按钮ID都是ddPrefixBtn_加数字后缀的格式（比如ddPrefixBtn_12、ddPrefixBtn_13），该选择器无法匹配到任何元素，所有读写操作都无效，自然输出undefined。
• 你需要匹配所有ID以ddPrefixBtn_开头的按钮，应该使用属性前缀选择器。

注意事项 #

• jQuery的data()方法读写的是jQuery内部缓存的数据，不会修改DOM上的data-*属性。如果你需要同步修改DOM上的实际属性，请使用attr('data-prefix', 值)写法。
• 页面内有多个匹配按钮时，需要遍历每个按钮单独处理属性读写，直接对选择器集合操作只会读取第一个元素的属性值。

修正后的代码示例 #

// 1. 匹配所有ID以ddPrefixBtn_开头的按钮
let $prefixBtns = $('button[id^="ddPrefixBtn_"]');
// 2. 获取下拉框选中项的prefix值
let n = $('#change_service_booked').find(':selected').attr('data-prefix');

// 3. 遍历每个按钮单独设置和读取属性
$prefixBtns.each(function() {
    let $btn = $(this);
    // 获取当前按钮的title
    let t = $btn.attr('data-title');
    // 拼接prefix值
    let fullPrefix = t + ' - #' + n;
    // 设置数据（如果要修改DOM属性就换成 $btn.attr('data-prefix', fullPrefix) ）
    $btn.data('prefix', fullPrefix);
    // 测试输出
    console.log($btn.data('prefix'));

    // 后续业务逻辑放在遍历内，针对每个按钮单独处理
    let titleValue = $(".field-paid-service-select option").filter((i, e) => {
        return e.innerHTML.indexOf(fullPrefix) > -1;
    }).val();
    $(".field-paid-service-select").val(titleValue);
    $(".field-paid-service-select").find('option').not(':selected').remove();
});

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