JavaScript querySelector仅作用首个元素，复制后食谱盒分量调整按钮失效如何解决

问题原因 #

• document.querySelector()只会匹配页面中第一个符合类名的元素，你复制出来的第二份及后续食谱盒的按钮、数值展示元素根本没有被选中，也就没有绑定对应的点击事件
• 原有代码中count、initRecipeValue都是全局变量，就算给后续组件绑定了事件，多个组件的操作也会共用同一组变量，出现数据串扰的问题

解决方案 #

首先给每个独立的食谱盒组件最外层添加统一的类名（比如recipe-box），作为每个组件的作用域边界，之后替换原有JS代码即可：

// 页面加载完成后统一初始化所有食谱盒
window.addEventListener("load", () => {
  // 遍历页面内所有食谱盒
  document.querySelectorAll(".recipe-box").forEach(recipeBox => {
    // 仅在当前食谱盒范围内查询元素，避免跨组件干扰
    const plusBtn = recipeBox.querySelector(".portion-plus");
    const minusBtn = recipeBox.querySelector(".portion-minus");
    const portionNumber = recipeBox.querySelector(".portion-number span.portion-counter");
    const portionWord = recipeBox.querySelector(".portion-number span.portion-word");
    const contentAmount = recipeBox.querySelectorAll(".content-list li span.content-amount");
    
    // 每个食谱盒单独存储初始分量值和当前计数，状态完全隔离
    const initRecipeValue = [];
    let count = 1;

    // 保存当前食谱的初始食材数值，转换为数字类型避免运算异常
    contentAmount.forEach(elem => {
      initRecipeValue.push(Number(elem.innerText));
    });

    // 绑定当前食谱盒的加减按钮事件
    if (plusBtn && minusBtn) {
      plusBtn.addEventListener("click", () => recipeCalculation(0, 1));
      minusBtn.addEventListener("click", () => recipeCalculation(1, -1));
    }

    // 分量计算逻辑
    const recipeCalculation = (limit, addSub) => {
      if (count > limit) {
        count += addSub;
        portionNumber.textContent = count;
        contentAmount.forEach((content, index) => {
          content.textContent = initRecipeValue[index] * count;
        });
        // 如果需要适配中文，可替换为 portionWord.textContent = "份"
        portionWord.textContent = count > 1 ? "Portionen" : "Portion";
      }
    };
  });
});

核心修改点 #

• 以每个食谱盒外层容器为单位独立初始化，每个组件内部单独查询元素、绑定事件
• 所有状态变量都放在组件独立作用域内，多个组件之间的操作不会互相影响
• 给初始数值做了 Number 类型转换，避免字符串拼接的运算异常问题

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