使用jQuery累加data-item-rate元素值异常问题求助

嘿，我一眼就发现问题所在了——jQuery的.data()方法有个容易踩坑的缓存机制！

你现在的代码里，修改data-item-rate用的是.attr()，但累加的时候用.data()读取值。这里的问题是：jQuery第一次调用.data('item-rate')时，会把当前的属性值缓存到内部对象里，之后哪怕你用.attr()改了HTML上的属性，.data()返回的依然是缓存的旧值，根本不会去读最新的属性！

举个实际场景：

• 你点击Contact Form的Yes按钮，代码用.attr()把contact-form_rate的data-item-rate改成250，但因为之前第一次读取过这个值（初始是0），.data()还是返回0，所以累加的时候根本没加上250；
• 反过来，当你从Yes切回No，.attr()把属性改回0，但.data()还是返回之前的250，所以总计也不会减少。

两种修复方案任你选： #

方案1：直接读取HTML属性（绕开缓存） #

把累加逻辑里的.data('item-rate')换成.attr('data-item-rate')，这样每次都会直接从HTML上读取最新的属性值，不会受缓存影响：

function updateTotal() {
    let total = 0;
    $('p[data-item-rate]').each(function() {
        // 用attr直接读属性，加上十进制参数避免parseInt的坑
        const rate = parseInt($(this).attr('data-item-rate'), 10);
        total += isNaN(rate) ? 0 : rate;
    });
    $('#total_estimate').text(`${total} $`);
}

方案2：全程用jQuery的.data()来读写（同步缓存） #

如果你更习惯用.data()，那修改值的时候也得用.data()，而不是.attr()，这样jQuery会同步更新内部缓存：
把点击事件里的这行代码：

$('#' + id + '_rate').attr('data-item-rate', value);

改成：

$('#' + id + '_rate').data('item-rate', value);

这样后续用.data('item-rate')读取时，拿到的就是最新的值了。

额外的小优化 #

• 转换整数时记得加上第二个参数10，防止parseInt把开头带0的数字当成八进制解析；
• 点击事件里的id、name这些变量最好用const/let声明，不然会变成全局变量，容易引发奇怪的bug：

$('li.nav-item').click(function() {
    const id = $(this).data('id');
    const name = $(this).data('name');
    const rate = $(this).data('rate');
    const value = $(this).data('value');
    // ... 剩下的逻辑
});

内容的提问来源于stack exchange，提问作者PacPac