商品数量增减功能异常求助：减数量时数值跳变

问题描述 #

商品数量增减功能存在异常：增加数量功能正常，但点击减少按钮时出现数值跳变问题。例如点击加号19次后数值变为19，点击一次减号直接变成0，后续继续点击会变为-1、-2，此时再点击加号数值会变为20。尝试调整变量位置但问题未解决。

原代码 #

JavaScript 代码 #

const itemQuantitySystem = () => {
  let minus = document.querySelectorAll(".quantity .minus");
  let plus = document.querySelectorAll(".quantity .plus");
  
  plus.forEach(e => {
    let quantity = 1;
    e.addEventListener("click", () => {
      let number = e.previousElementSibling;
      quantity++;
      number.innerHTML = quantity;
    })
  })
  
  minus.forEach(e => {
    let quantity = parseInt(e.nextElementSibling.textContent);
    e.addEventListener("click", () => {
      console.log(quantity)
      let number = e.nextElementSibling;
      quantity--;
      number.innerHTML = quantity;
    })
  })
}

HTML 代码 #

<div class="quantity">
    <div class="minus">-</div>
    <div class="number">1</div>
    <div class="plus">+</div>
</div>

问题原因 #

1. 变量独立不同步：加号和减号各自维护独立的quantity变量，加号的quantity从1开始累加，但减号的quantity只在初始化时读取一次DOM的初始值1，后续完全不同步加号操作后的数值，导致点击减号时用的还是旧值计算。
2. 未基于实时DOM数值操作：加减操作没有读取当前显示的实时数值，而是依赖各自的变量状态，造成数据脱节。

修复方案 #

改为基于每个数量容器独立处理，每次操作都读取DOM的实时数值进行计算，确保数据同步：

修复后的 JavaScript 代码 #

const itemQuantitySystem = () => {
  // 遍历每个数量容器，确保加减按钮和数值属于同一组
  document.querySelectorAll(".quantity").forEach(container => {
    const minusBtn = container.querySelector(".minus");
    const plusBtn = container.querySelector(".plus");
    const numberDisplay = container.querySelector(".number");
    
    // 加号点击逻辑：读取当前值+1后更新
    plusBtn.addEventListener("click", () => {
      let currentQty = parseInt(numberDisplay.textContent);
      numberDisplay.textContent = ++currentQty;
    });
    
    // 减号点击逻辑：读取当前值-1后更新，可选限制最小值
    minusBtn.addEventListener("click", () => {
      let currentQty = parseInt(numberDisplay.textContent);
      // 可选：如果不想让数量小于1，取消下面注释
      // if (currentQty > 1) {
        numberDisplay.textContent = --currentQty;
      // }
    });
  });
};

修复说明 #

• 按.quantity容器分组处理，避免跨组元素干扰，逻辑更清晰
• 每次点击都读取DOM中显示的实时数值，保证加减操作基于最新状态
• 去掉了独立的quantity变量，消除数据不同步的根源
• 可按需添加数量最小值限制（比如不能小于1），优化用户体验

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