使用jQuery计算data-item-rate元素总和时，清空购物车后新增项显示NaN的问题

你遇到的NaN问题，根源出在updateTotal函数的实现逻辑上：

当前的updateTotal是基于页面上显示的总计文本（比如0 $）来做累加的，它严重依赖文本必须严格是"数字 $"的格式：

var total = $('#total_estimate').html();
total = total.split(" ");
total = parseInt(total[0]) + parseInt(value) + " $"

一旦这个格式被破坏（比如偶然变成"$0"、空字符串，或者其他非预期格式），parseInt(total[0])就会返回NaN，后续的加法运算结果自然也是NaN，而且这个错误会持续影响后续所有的总计计算。

举个典型场景：如果某次操作后，总计文本意外变成了"$0"（没有空格，且美元符号在前面），split(" ")后得到的数组只有["$0"]，parseInt("$0")会返回NaN，之后无论加什么数值，结果都是NaN。

另外，当前的累加逻辑本身就有风险：它假设每次点击传递的value都是正确的增量/减量，但如果出现重复点击、状态不同步的情况，很容易导致总计和实际选中的项目值不一致。

替换掉当前的updateTotal函数，改用你注释掉的那种重新计算所有选中项目总和的逻辑——这种方式不依赖总计文本的格式，直接从每个项目的data-item-rate属性取值计算，完全避免了格式问题带来的NaN：

function updateTotal() {
    var total = 0;
    // 遍历所有带有data-item-rate属性的元素，累加有效值
    $('p[data-item-rate]').each(function() {
        var itemRate = parseInt($(this).data('item-rate'), 10);
        total += isNaN(itemRate) ? 0 : itemRate;
    });
    // 更新总计文本，保证格式正确
    $('#total_estimate').html(total + ' $');
}

然后修改调用updateTotal的地方，不需要再传递value参数：

// 原来的调用：updateTotal(value);
updateTotal(); // 直接调用即可

• 给所有data-value属性设置数值类型，避免字符串转换问题（比如data-value="50"，jQuery的data()会自动处理为数字）。
• 在解析数值时始终加上基数10，避免JavaScript默认的八进制解析问题，比如：

  var value = parseInt($(this).data('value'), 10);
  

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