WooCommerce数量字段功能异常：购物车页面仅单个数量输入框可正常调整数值

嘿，我一眼就看出你的购物车数量模块出问题的原因啦，咱们一步步拆解：

核心问题点 #

• 重复ID导致事件只绑定到第一个元素：你用$('.minus').attr('id', 'minus');和$('.plus').attr('id', 'plus');给所有同类型按钮设置了相同ID，但HTML规范里ID必须是唯一的！所以document.getElementById('minus')和document.getElementById('plus')只会获取到页面上第一个匹配的按钮，其他按钮根本没绑定点击事件。
• 输入框选择器只选中第一个元素：每次点击按钮时，你用document.querySelector('[title="Qty"]')只会拿到页面中第一个带title="Qty"的输入框，不管你点的是哪个购物项的按钮，都只会修改第一个输入框的数值。

修复后的代码方案 #

我给你三种修复方式，选你顺手的来：

方案1：原生JS遍历绑定（适合静态渲染的购物项）

// 给所有加号按钮绑定点击事件
document.querySelectorAll('.plus').forEach(btn => {
  btn.addEventListener('click', function() {
    // 找到当前按钮所在购物项的输入框
    const input = this.closest('.padding-td').querySelector('[title="Qty"]');
    let count = parseInt(input.value, 10);
    input.value = ++count;
  });
});

// 给所有减号按钮绑定点击事件
document.querySelectorAll('.minus').forEach(btn => {
  btn.addEventListener('click', function() {
    const input = this.closest('.padding-td').querySelector('[title="Qty"]');
    let count = parseInt(input.value, 10);
    if (count > 1) {
      input.value = --count;
    }
  });
});

方案2：jQuery简洁写法（如果你项目里已经引入了jQuery）

// 移除原来设置ID的两行代码，不需要重复ID！
// $('.minus').attr('id', 'minus');
// $('.plus').attr('id', 'plus');

$('.plus').click(function() {
  const $input = $(this).closest('.padding-td').find('[title="Qty"]');
  let count = parseInt($input.val(), 10);
  $input.val(++count);
});

$('.minus').click(function() {
  const $input = $(this).closest('.padding-td').find('[title="Qty"]');
  let count = parseInt($input.val(), 10);
  if (count > 1) {
    $input.val(--count);
  }
});

方案3：事件委托（适合动态加载的购物项，比如AJAX添加的）

如果你的购物车是动态渲染的（比如用户可以随时添加商品到购物车），用事件委托更靠谱，不用每次新增元素都重新绑定事件：

document.querySelector('body').addEventListener('click', function(e) {
  // 判断点击的是加号按钮
  if (e.target.closest('.plus')) {
    const btn = e.target.closest('.plus');
    const input = btn.closest('.padding-td').querySelector('[title="Qty"]');
    let count = parseInt(input.value, 10);
    input.value = ++count;
  } 
  // 判断点击的是减号按钮
  else if (e.target.closest('.minus')) {
    const btn = e.target.closest('.minus');
    const input = btn.closest('.padding-td').querySelector('[title="Qty"]');
    let count = parseInt(input.value, 10);
    if (count > 1) {
      input.value = --count;
    }
  }
});

关键逻辑说明 #

• 用closest('.padding-td')定位当前按钮所在的购物项容器，确保只操作当前项的输入框，不会影响其他购物项。
• 移除了重复设置ID的代码，遵循HTML ID唯一性规范。
• 用parseInt把输入框的字符串值转成数字，避免出现字符串拼接的问题（比如输入框值是"1"，直接count++会变成"11"而不是2）。

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