JavaScript实现指定类元素文本数值求和问题求助

嘿，我来帮你搞定这个求和的问题！咱们先拆解下你原来代码里的问题，再给你靠谱的实现方案。

原代码的核心bug #

你一开始把size初始成了空字符串''，这就导致每次执行size += parseInt(...)时，本质是字符串拼接而非数值相加——第一次是'' + 1000得到'1000'，第二次是'1000' + 2000得到'10002000'，这就是控制台输出字符串的原因。

而你后来尝试的那段代码，因为size已经是字符串'10002000'，size[i][1]这种写法完全错误（字符串的索引只能取单个字符，比如size[0]是'1'，size[i][1]会返回undefined），所以累加后得到NaN也不奇怪啦。

正确的实现方式 #

只需要把总和变量初始化为数值类型的0，然后遍历每个元素，把提取到的数字加到总和里就行，还可以加个判断避免无效数字导致的NaN：

$(document).ready(function(){ 
    var elements = document.getElementsByClassName("item-size"); 
    var totalSize = 0; // 关键：初始化为数值0，不是字符串
    for (var i=0; i<elements.length; i++) { 
        // 清理文本中的非数字/小数点，转成整数
        var num = parseInt((elements[i].innerText).replace(/[^0-9.]/g, ""), 10);
        // 确保是有效数字再累加
        if (!isNaN(num)) {
            totalSize += num;
        }
    } 
    console.log(totalSize); // 现在会输出3000啦！
});

更简洁的jQuery写法 #

如果你已经在用jQuery，也可以用each()方法遍历，代码更清爽：

$(document).ready(function(){ 
    var totalSize = 0;
    $('.item-size').each(function() {
        var num = parseInt($(this).text().replace(/[^0-9.]/g, ""), 10);
        if (!isNaN(num)) {
            totalSize += num;
        }
    });
    console.log(totalSize);
});

这样就能完美得到你想要的数值求和结果3000了～

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