网站商品总价计算异常问题求助（基于JQuery实现）

核心问题点 #

1. 总价元素取值错误：#all_price是<div>而非表单输入，不能用.val()获取内容，且内容带$符号，直接使用会触发字符串拼接而非数值计算。
2. 单个商品总价属性未同步更新：conversionPrice仅修改了itemTotalPrice的文本，未更新其存储价格的属性，导致totalConversionPrice读取的始终是初始价格。
3. 总价计算逻辑混乱：
   • 未初始化total变量，循环时只会覆盖值而非累加
   • 错误地将当前商品总价res重复叠加，导致计算结果翻倍/异常
   • 未将字符串转成数值，直接+操作会变成字符串拼接
4. 非标准属性使用：<span>的value属性不符合HTML规范，建议改用data-value存储数值。

修复后的代码 #

1. 修正单个商品计算函数conversionPrice #

function conversionPrice(id) {                                   
    // 转数值，避免字符串运算
    let newCnt = Number($(`#count__input${id}`).val());                                   
    let itemPrice = Number($(`#itemPrice_${id}`).attr('value'));
    let itemRealPrice = newCnt * itemPrice;
    
    // 同时更新文本和data-value属性（替换原value）
    $(`#itemTotalPrice_${id}`)
        .text(itemRealPrice + '$')
        .attr('data-value', itemRealPrice);
    
    // 直接调用总价计算，无需传参
    totalConversionPrice();
}

2. 重写总价计算函数totalConversionPrice #

function totalConversionPrice() {
    let total = 0;
    // 遍历所有商品的总价元素，累加实时数值
    $('.itemTotalPrice').each(function() {         
        let price = Number($(this).attr('data-value'));         
        total += price;     
    });     
    // 保留两位小数，符合价格展示规范
    $('#all_price').text(total.toFixed(2) + '$'); 
}

3. 页面结构规范调整 #

将itemTotalPrice的value属性改为data-value（符合HTML标准）：

<div class="product__total-price<?= $cartProducts['id_product'] ?>">
    <span class="itemTotalPrice" id="itemTotalPrice_<?= $cartProducts['id_product'] ?>" data-value="<?= $cartProducts['price'] ?>">
        <?= $cartProducts['price'] ?>$
    </span>
</div>

关键说明 #

• 所有涉及数值计算的变量必须用Number()转成数值类型，彻底避免字符串拼接错误
• 总价计算直接遍历所有商品的实时总价，完全重新计算，杜绝依赖旧总价导致的累加异常
• 使用data-*属性存储自定义数值，符合HTML规范，避免浏览器兼容性问题
• 用toFixed(2)保留两位小数，适配价格展示的常规需求

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