JS循环生成菜单项点击增减数量其他项数值同步变更如何解决

问题根源 #

你的代码出现该问题的核心原因是循环内部使用了函数作用域的var声明变量：
var存在变量提升特性，作用域是整个ShowTheMenu函数，没有块级作用域。每次循环迭代时，var声明的itemQuantity、quantityValue等变量都会被后一次迭代的值覆盖，最终所有按钮的点击事件都引用了最后一次循环生成的数量变量和数量显示DOM元素，所以点击任意按钮都会修改非对应菜单项的数值。

解决方案 #

只需要把循环内部所有用var声明的变量，全部替换为块级作用域的let（如果变量不会被重新赋值，也可以用const）即可，let/const支持块级作用域，每次循环迭代都会生成独立的变量绑定，每个点击事件会对应到当前菜单项独有的数量变量和DOM元素。

示例修改片段： #

// 把循环内所有var替换为let/const
if (data[i].KategorijaBroj == theCategoryId) {
    // MAIN PARENT
    // 原var改成let
    let itemBox = document.createElement("div");
    itemBox.classList.add("itembox");

    // 不会被重新赋值的DOM元素可以用const，性能更好
    const itemImage = document.createElement("img");
    itemImage.classList.add("itemimage");
    itemImage.src = "/menuitemsimages/" + data[i].Image;

    const itemContent = document.createElement("div");
    itemContent.classList.add("itemcontent");

    const itemTitle = document.createElement("h3");
    itemTitle.classList.add("itemtitle");
    itemTitle.innerHTML = data[i].Title;

    const itemPrice = document.createElement("p");
    itemPrice.classList.add("itemprice");
    itemPrice.innerHTML = "$" + data[i].Price;

    const itemQnt = document.createElement("p");
    itemQnt.classList.add("quantity");
    itemQnt.innerHTML = "Quantity";

    const buttonsBox = document.createElement("div");
    buttonsBox.classList.add("divcontrolbtns");

    // 数量变量会被修改，用let声明
    let itemQuantity = 0;
    const quantityValue = document.createElement("div");
    quantityValue.innerHTML = itemQuantity;

    const increaseBtn = document.createElement("div");
    increaseBtn.classList.add("controlbtns");
    increaseBtn.innerHTML = "+";
    increaseBtn.addEventListener("click", function () {
        if(itemQuantity < 10) {
            itemQuantity++;
        }
        quantityValue.innerHTML = itemQuantity;
    })

    const decreaseBtn = document.createElement("div");
    decreaseBtn.classList.add("controlbtns");
    decreaseBtn.innerHTML = "-";
    decreaseBtn.addEventListener("click", function () {
        if(itemQuantity > 0) {
            itemQuantity--;
        }
        quantityValue.innerHTML = itemQuantity;
    })

    const itemAddToCart = document.createElement("button");
    itemAddToCart.classList.add("btn-add-to-cart");
    itemAddToCart.textContent = "Add to cart";

    const itemDesc = document.createElement("p");
    itemDesc.classList.add("itemdesc");
    itemDesc.innerHTML = data[i].Description;
    
    // 剩余DOM拼接逻辑保持不变
}

修改完成后即可实现点击对应菜单项的增减按钮，仅修改当前菜单项的数量值。

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