新增商品后购物车移除、数量管理按钮失效问题求助

核心问题点 #

一共两个硬编码逻辑导致的bug：

• 加购逻辑靠循环下标硬匹配商品：页面加载时一次性获取所有加购按钮，通过循环序号i直接对应products数组里的第i个商品。新增商品后，只要按钮数量和products数组长度对不上、或者数组里没加新商品信息，点击新商品加购时就会取到空值，直接报错。
• 购物车按钮绑定逻辑冗余且脆弱：每次重绘购物车DOM都重新给按钮绑事件，还靠遍历DOM层级、正则匹配商品文本找对应商品，只要DOM结构稍改、或者重绘时数据缓存没更新，就会出现点击无响应、找错商品的问题。

修复步骤 #

1. 改商品页HTML，去掉序号类名硬关联，用自定义属性绑定商品标识 #

把每个加购按钮的cart1/cart2这类序号类名删掉，加data-tag属性，属性值和products数组里对应商品的tag字段完全一致，新商品也按这个规则写：

<!-- 示例：灰色T恤的加购按钮 -->
<a class="add-cart" href="#" data-tag="greytshirt">Add to Cart</a>
<input type="hidden" value="15"/>

<!-- 示例：灰色卫衣的加购按钮 -->
<a class="add-cart" href="#" data-tag="greyhoddie">Add to Cart</a>
<input type="hidden" value="20"/>

*新增加的商品必须同步在products数组里添加对应配置，tag字段要和按钮上的data-tag、商品图片文件名完全对应。

2. 替换加购事件绑定逻辑，用事件委托代替下标硬匹配 #

把main.js里原来循环给carts按钮绑事件的整段for循环删掉，换成事件委托写法，不管后续加多少商品、是不是异步加载的，加购按钮都能响应：

// 加购事件委托，绑定一次全局生效
document.addEventListener('click', function(e) {
  if (!e.target.classList.contains('add-cart')) return;
  e.preventDefault();
  const targetTag = e.target.dataset.tag;
  const matchedProduct = products.find(prod => prod.tag === targetTag);
  if (!matchedProduct) return;
  cartNumbers(matchedProduct);
  totalCost(matchedProduct);
})

3. 重构购物车按钮事件逻辑，去掉重复绑定，用事件委托统一处理 #

首先把displayCart()函数末尾调用deleteButtons()、manageQuantity()的两行代码删掉，不需要每次重绘购物车都重新绑事件。
然后把原来的deleteButtons()、manageQuantity()两个函数的全部代码删掉，换成DOM加载完成后绑定一次的容器事件委托，同时点击时实时读最新的localStorage数据，不要缓存旧数据：

document.addEventListener('DOMContentLoaded', function() {
  const cartContainer = document.querySelector('.products');
  if (!cartContainer) return;

  cartContainer.addEventListener('click', function(e) {
    // 实时读最新购物车数据，不用缓存
    const cartItems = JSON.parse(localStorage.getItem('productsInCart')) || {};
    const productEl = e.target.closest('.product');
    // 点击的不是购物车内商品操作按钮直接跳过
    if (!productEl) return;
    const productTag = productEl.dataset.tag;
    const currentProduct = cartItems[productTag];
    if (!currentProduct) return;

    // 处理减数量
    if (e.target.classList.contains('decrease')) {
      if (currentProduct.inCart <= 1) return;
      currentProduct.inCart -= 1;
      localStorage.setItem('productsInCart', JSON.stringify(cartItems));
      cartNumbers(currentProduct, 'decrease');
      totalCost(currentProduct, 'decrease');
      displayCart();
    }

    // 处理加数量
    if (e.target.classList.contains('increase')) {
      currentProduct.inCart += 1;
      localStorage.setItem('productsInCart', JSON.stringify(cartItems));
      cartNumbers(currentProduct);
      totalCost(currentProduct);
      displayCart();
    }

    // 处理删除商品
    if (e.target.name === 'close-circle') {
      const productCount = parseInt(localStorage.getItem('cartNumbers')) || 0;
      const totalCartCost = parseInt(localStorage.getItem('totalCost')) || 0;
      localStorage.setItem('cartNumbers', productCount - currentProduct.inCart);
      localStorage.setItem('totalCost', totalCartCost - (currentProduct.price * currentProduct.inCart));
      delete cartItems[productTag];
      localStorage.setItem('productsInCart', JSON.stringify(cartItems));
      displayCart();
      onLoadCartNumbers();
    }
  })
})

4. 修改购物车商品渲染模板，给商品项加标识 #

把displayCart()里拼接商品HTML的代码改一下，给每个.product根节点加data-tag属性，不要靠匹配文本找商品：

Object.values(cartItems).map( (item) => {
  productContainer.innerHTML += 
  `<div class="product" data-tag="${item.tag}"><ion-icon name="close-circle"></ion-icon><img src="../images/${item.tag}.jpg" />
      <span class="sm-hide">${item.name}</span>
  </div>
  <div class="price sm-hide">$${item.price},00</div>
  <div class="quantity">
      <ion-icon class="decrease" name="arrow-dropleft-circle"></ion-icon>
          <span>${item.inCart}</span>
      <ion-icon class="increase" name="arrow-dropright-circle"></ion-icon>   
  </div>
  <div class="total">$${item.inCart * item.price},00</div>`;
});

修复后效果 #

后续不管新增多少商品，只要按规则给加购按钮加data-tag、同步products数组配置，加购、删商品、改数量的功能都能正常运行，不会再出现按钮无响应的问题，也不用每次改商品数量都调整事件绑定逻辑。

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