jQuery更新多表单隐藏域异常、数量合计返回NaN问题求助

安全阿岳

2026-9-27

问题修复方案

错误原因

初始版本错误：遍历.quantity元素时没有使用$(this)指向当前遍历项，全局类选择器默认取页面第一个匹配元素的数值，同时批量给所有隐藏域赋值同一数值，导致只有某一个隐藏域看起来被修改。
后续版本NaN错误：1. 累加变量quantityUpdated没有初始化为0，undefined和数字相加直接返回NaN；2. 未对parseFloat的结果做异常兜底，输入为空、非数字字符时parseFloat返回NaN，累加后整体结果异常。

修复后完整代码

方案1：每次修改同步所有商品隐藏域

$('.quantity').on('change', function() {
    // 同步所有商品数量到对应表单的隐藏域
    $('.quantity').each(function(){ 
        const curQty = parseFloat($(this).val()) || 0;
        // 直接查找当前输入框同级的隐藏域，比向上查找表单效率更高
        $(this).siblings('.quantityUpdated').val(curQty);
    })
    // 累加前必须初始化变量为0
    let totalQty = 0;
    $('.quantityUpdated').each(function() {
         totalQty += parseFloat($(this).val()) || 0;
    });
    // 此处可添加总数量的后续业务逻辑，比如渲染到页面总数量展示位
    console.log('商品总数量：', totalQty);
});

方案2：仅更新当前修改的商品隐藏域（性能更优）

如果不需要全量同步，仅修改触发change事件的商品对应隐藏域即可：

$('.quantity').on('change', function() {
    // 仅更新当前修改的商品隐藏域
    const curQty = parseFloat($(this).val()) || 0;
    $(this).siblings('.quantityUpdated').val(curQty);
    // 统计总数量
    let totalQty = 0;
    $('.quantityUpdated').each(function() {
         totalQty += parseFloat($(this).val()) || 0;
    });
    console.log('商品总数量：', totalQty);
});