如何让三个同class增减按钮分别对应各自数字输入框而非仅最后一个？

问题原因 #

你当前的代码中，elem变量通过.pop()只获取到了最后一个数字输入框，所以无论点击哪个加减按钮，都会只修改这个最后一个输入框的值，这就是为什么只有第三个输入框有响应。

修正后的代码 #

JavaScript

// 绑定增量按钮点击事件
document.querySelectorAll(".product-quantity-button-up").forEach(button => {
    button.addEventListener("click", function() {
        // 找到当前按钮所属的容器，再获取对应输入框
        const container = this.closest(".product-quantity-button-container");
        const input = container.querySelector('input[type="number"]');
        input.value = Number(input.value) + 1;
    });
});

// 绑定减量按钮点击事件
document.querySelectorAll(".product-quantity-button-down").forEach(button => {
    button.addEventListener("click", function() {
        const container = this.closest(".product-quantity-button-container");
        const input = container.querySelector('input[type="number"]');
        let newValue = Number(input.value) - 1;
        input.value = newValue <= 0 ? 0 : newValue;
    });
});

HTML（无需修改，保持原结构重复3次即可）

<div class="product-quantity-button-container">
  <div>
    <input type="number" min="1">
  </div>
  <div class="product-quantity-arrow-container">
    <button class="product-quantity-button-up">
      <img class="product-quantity-arrow" src="arrow-up.svg">
    </button>
    <button class="product-quantity-button-down">
      <img class="product-quantity-arrow" src="arrow-down.svg">
    </button>
  </div>
</div>

关键修改说明 #

• 移除了全局固定的elem变量，改为每次点击按钮时，通过this.closest()定位到当前按钮所在的父容器，确保每个按钮只操作自己容器内的输入框
• 使用container.querySelector()从当前容器中获取对应的输入框，实现按钮与输入框的一一绑定
• 优化了减量逻辑，直接计算新值后再赋值，代码更简洁

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