为多数量切换组件的每个事件设置独立变量的实现方案

首先你代码里有个核心问题：HTML里重复使用了id="qty"，id是全局唯一标识，document.getElementById('qty')永远只会找到第一个匹配元素，这也是所有组件同步变化的原因之一。先把HTML里的id改成class，比如class="qty__value"：

<div class="spares-results__price-section">
  <span class="spares-results__price">£5.00</span>

  <div class="qty">
    <button type="button" class="qty__btn qty__btn--decrease">
        <span class="qty__symbol">-</span>
    </button>

    <span class="qty__amount">x<span class="qty__value">1</span></span>

    <button type="button" class="qty__btn qty__btn--increase">
        <span class="qty__symbol">+</span>
    </button>

  </div>
</div>

<div class="spares-results__price-section">
  <span class="spares-results__price">£5.00</span>

  <div class="qty">
    <button type="button" class="qty__btn qty__btn--decrease">
        <span class="qty__symbol">-</span>
    </button>

    <span class="qty__amount">x<span class="qty__value">1</span></span>

    <button type="button" class="qty__btn qty__btn--increase">
        <span class="qty__symbol">+</span>
    </button>

  </div>
</div>

接下来回答你的两个疑问：

• 不需要用数组实现
• 可以让每个组件拥有独立的currentValue，下面给两种简单可行的方案：

方案一：用闭包创建独立作用域 #

给每个数量组件绑定事件时，单独创建作用域保存当前值，确保每个组件的数值互不干扰：

// 获取所有数量组件容器
const qtyContainers = document.querySelectorAll(".qty");

qtyContainers.forEach(container => {
  // 每个组件独立维护的currentValue
  let currentValue = 1;
  // 找到当前容器内的操作按钮和数值显示元素
  const minusBtn = container.querySelector(".qty__btn--decrease");
  const addBtn = container.querySelector(".qty__btn--increase");
  const valueEl = container.querySelector(".qty__value");

  // 绑定减按钮事件
  minusBtn.addEventListener('click', () => {
    if (currentValue > 1) {
      currentValue--;
    }
    valueEl.textContent = currentValue;
  });

  // 绑定加按钮事件
  addBtn.addEventListener('click', () => {
    currentValue++;
    valueEl.textContent = currentValue;
  });
});

方案二：把状态存在DOM元素的dataset里 #

不需要额外声明变量，直接将当前值存在组件的dataset属性中，每次操作时读取并更新：

// 获取所有加减按钮
const minusBtns = document.querySelectorAll(".qty__btn--decrease");
const addBtns = document.querySelectorAll(".qty__btn--increase");

// 减按钮逻辑
minusBtns.forEach(btn => {
  btn.addEventListener('click', (e) => {
    // 找到当前按钮所属的数量容器
    const container = e.target.closest(".qty");
    const valueEl = container.querySelector(".qty__value");
    // 读取当前值，默认1
    let currentValue = parseInt(valueEl.dataset.value || 1);
    if (currentValue > 1) {
      currentValue--;
    }
    // 更新显示内容和dataset存储值
    valueEl.textContent = currentValue;
    valueEl.dataset.value = currentValue;
  });
});

// 加按钮逻辑
addBtns.forEach(btn => {
  btn.addEventListener('click', (e) => {
    const container = e.target.closest(".qty");
    const valueEl = container.querySelector(".qty__value");
    let currentValue = parseInt(valueEl.dataset.value || 1);
    currentValue++;
    valueEl.textContent = currentValue;
    valueEl.dataset.value = currentValue;
  });
});

这两种方案都能实现每个数量组件独立维护数值的需求，无需使用数组。方案一用闭包逻辑更直观，适合理解作用域概念；方案二用DOM存储状态，无需额外变量，更轻量化。

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