JavaScript购物车数量加减按钮仅首个生效问题求助

问题根源 #

1. 你用querySelector获取card_value1、pqtplus1、pqtminus1时，只会选中页面中第一个匹配的元素，导致加减按钮的事件仅绑定到第一个控件上。
2. 全局变量cartvalue1被所有控件共用，多个控件操作同一个数值会造成逻辑混乱。
3. 事件处理函数直接操作全局选中的第一个元素，不管点击哪个控件，都只会修改第一个控件的数值。

修复后的代码 #

HTML（保留原结构，建议类名去掉数字后缀以提升通用性）

<div class="d-flex align-items-center pls-moins">
  <span class="count-number float-right"> 
    <button type="button" class="btn-sm left dec btn btn-outline-secondary pqt-minus"> 
      <i class="feather-minus"></i> - 
    </button>
    <div class="cart-button">
      <span class="added">0</span>
    </div>
    <button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus"> 
      <i class="feather-plus"></i> + 
    </button>
  </span>
</div>

<div class="d-flex align-items-center pls-moins">
  <span class="count-number float-right"> 
    <button type="button" class="btn-sm left dec btn btn-outline-secondary pqt-minus"> 
      <i class="feather-minus"></i> - 
    </button>
    <div class="cart-button">
      <span class="added">0</span>
    </div>
    <button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus"> 
      <i class="feather-plus"></i> + 
    </button>
  </span>
</div>

<div class="d-flex align-items-center pls-moins">
  <span class="count-number float-right"> 
    <button type="button" class="btn-sm left dec btn btn-outline-secondary pqt-minus"> 
      <i class="feather-minus"></i> - 
    </button>
    <div class="cart-button">
      <span class="added">0</span>
    </div>
    <button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus"> 
      <i class="feather-plus"></i> + 
    </button>
  </span>
</div>

<div class="d-flex align-items-center pls-moins">
  <span class="count-number float-right"> 
    <button type="button" class="btn-sm left dec btn btn-outline-secondary pqt-minus"> 
      <i class="feather-minus"></i> - 
    </button>
    <div class="cart-button">
      <span class="added">0</span>
    </div>
    <button type="button" class="btn-sm right inc btn btn-outline-secondary pqt-plus"> 
      <i class="feather-plus"></i> + 
    </button>
  </span>
</div>

JavaScript

// 获取所有控件容器
const quantityControls = document.querySelectorAll('.pls-moins');

quantityControls.forEach(control => {
  // 从当前容器内获取对应的元素，避免全局选择错误
  const minusBtn = control.querySelector('.pqt-minus');
  const plusBtn = control.querySelector('.pqt-plus');
  const valueDisplay = control.querySelector('.added');
  const cartButton = control.querySelector('.cart-button');
  
  // 每个控件维护独立的数值，互不干扰
  let currentValue = parseInt(valueDisplay.textContent);

  // 加按钮逻辑
  plusBtn.addEventListener('click', () => {
    currentValue += 1;
    valueDisplay.textContent = currentValue;
  });

  // 减按钮逻辑（限制最小值为0）
  minusBtn.addEventListener('click', () => {
    if (currentValue > 0) {
      currentValue -= 1;
      valueDisplay.textContent = currentValue;
    }
  });

  // 点击数值容器的逻辑
  cartButton.addEventListener('click', () => {
    currentValue += 1;
    valueDisplay.textContent = currentValue;
  });
});

修复说明 #

• 遍历每个控件容器，为每个容器单独绑定事件，确保每个控件的操作互不影响。
• 每个控件拥有独立的currentValue变量，避免全局数值冲突。
• 通过control.querySelector在当前容器内查找子元素，精准定位当前操作的控件元素。

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