多个事件监听器仅更新最后一个字段的问题排查与解决

问题根源 #

你遇到的问题是函数级作用域变量导致的闭包陷阱：用var声明的p和s属于函数作用域，整个循环结束后，所有事件监听器里引用的p、s、inputID都是最后一次循环的结果，所以无论触发哪个输入框，都会调用最后一个产品的更新逻辑。

修复方案 #

方案1：用let替代var（最简洁） #

let具有块级作用域，每次循环都会创建独立的变量绑定，监听器会捕获当前循环的变量值：

//Set the listener for each products input box
function SetListeners(_prodList) {
    // 把var换成let
    for(let p in _prodList)
    {
        //We need a listener for each size
        // 把var换成let
        for(let s in _prodList[p].sizes)
        {
            var inputID = 'input-' + _prodList[p].sizes[s].sku;
            document.getElementById(inputID).addEventListener('input', function() {
                UpdatePrice(inputID, _prodList[p].sizes[s].price, 'total-' + _prodList[p].id);
                UpdateTotal();
            });
        }
    }
}

方案2：使用立即执行函数（IIFE）捕获变量 #

如果需要兼容旧环境，用IIFE把每次循环的变量封装到独立作用域：

//Set the listener for each products input box
function SetListeners(_prodList) {
    for(var p in _prodList)
    {
        for(var s in _prodList[p].sizes)
        {
            (function(currentP, currentS) {
                var inputID = 'input-' + _prodList[currentP].sizes[currentS].sku;
                document.getElementById(inputID).addEventListener('input', function() {
                    UpdatePrice(inputID, _prodList[currentP].sizes[currentS].price, 'total-' + _prodList[currentP].id);
                    UpdateTotal();
                });
            })(p, s);
        }
    }
}

方案3：创建元素时直接绑定监听器（更高效） #

可以在SetProducts函数创建输入框的时候直接添加监听器，避免额外的循环和DOM查询，同时自然规避作用域问题：

// 在SetProducts函数的尺寸循环里修改
for(var s in _products[p].sizes)
{
    var temp = document.createElement('div');
    var size = _products[p].sizes[s];
    temp.setAttribute("id","size-"+size.sku); 
    _products[p].sizes.length > 1 ? temp.setAttribute("class","flex underline") : temp.setAttribute("class","flex"); 
    var price= document.createElement('div');
    price.innerHTML = (size.size == '' ? '' : size.size + ': ') + '<strong>$' + size.price.toFixed(2) + '</strong><br/><span class="sku"><i>' + size.sku + '</i></span>';
    price.setAttribute("class","half"); 
    temp.append(price);
    var input = document.createElement("input");
    input.type = "number";
    input.setAttribute("id", "input-" + size.sku);
    input.setAttribute("class", "quantity-input half");
    
    // 直接在这里添加监听器
    input.addEventListener('input', function() {
        UpdatePrice(this.id, size.price, 'total-' + _products[p].id);
        UpdateTotal();
    });
    
    temp.append(input);
    productSizes.append(temp);
}

修改后可以完全去掉SetListeners函数，代码更简洁高效。

额外优化建议 #

可以给输入框添加data-*属性存储价格和总价元素ID，彻底解耦监听器与外部数据结构，代码更健壮：

// 创建输入框时添加属性
input.setAttribute("data-price", size.price);
input.setAttribute("data-total-id", 'total-' + _products[p].id);

// 监听器简化
input.addEventListener('input', function() {
    var qty = this.value;
    var price = parseFloat(this.dataset.price);
    var totalId = this.dataset.totalId;
    var prodTotal = (qty * price).toFixed(2);
    document.getElementById(totalId).innerHTML = '$' + prodTotal;
    UpdateTotal();
});

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