点击添加/移除按钮时如何动态显示商品状态？实现通用函数

你现在的代码存在两个核心问题：一是HTML里重复使用了id="caption"，这不符合HTML规范（id必须唯一）；二是硬编码获取flower-caption的内容，导致所有按钮点击都只会显示同一个商品的提示，而且每个按钮类型都写了重复的事件逻辑。

下面是优化后的完整解决方案：

步骤1：修正HTML结构，用class替代重复的id #

把每个商品里的figure和figcaption的id改成class，同时给按钮统一类名并通过data-action区分操作类型，避免冗余：

<div class="product">
  <figure class="product-figure">
    <img src="images/flower.png" alt="Flowers" />
    <figcaption class="product-caption">Beautiful Flower</figcaption>
  </figure>
  <button type="button" class="cart-btn" data-action="add">Add To Cart</button>
  <button type="button" class="cart-btn" data-action="remove">Remove From Cart</button>
</div>

<div class="product">
  <figure class="product-figure">
    <img src="images/parrot.png" alt="Parrot" />
    <figcaption class="product-caption">Parrot</figcaption>
  </figure>
  <button type="button" class="cart-btn" data-action="add">Add To Cart</button>
  <button type="button" class="cart-btn" data-action="remove">Remove From Cart</button>
</div>

<!-- 用来显示提示的元素 -->
<div id="message"></div>

步骤2：编写动态处理的JS逻辑 #

通过DOM遍历定位当前商品，结合data-action属性统一处理所有按钮的点击事件，无需为每个商品单独写函数：

// 给所有购物车按钮绑定点击事件
document.querySelectorAll(".cart-btn").forEach(btn => {
  btn.addEventListener("click", function() {
    // 找到当前按钮所属的商品容器
    const productContainer = this.closest(".product");
    // 获取当前商品的标题文本
    const proName = productContainer.querySelector(".product-caption").textContent;
    // 获取按钮对应的操作类型
    const action = this.dataset.action;
    
    // 更新提示内容
    const messageElement = document.getElementById("message");
    messageElement.textContent = `${proName} ${action === 'add' ? 'Added' : 'Removed'}.`;

    // 可选：添加自动消失的提示效果
    messageElement.style.display = "block";
    setTimeout(() => {
      messageElement.style.display = "none";
    }, 2000);
  });
});

关键逻辑说明 #

• this.closest(".product")：从当前按钮向上查找最近的商品容器，确保精准定位到点击的商品
• productContainer.querySelector(".product-caption")：在当前商品容器内获取标题，避免拿到其他商品的内容
• data-action属性：统一区分添加/移除操作，减少重复的事件处理代码

这样修改后，不管新增多少个商品模块，JS代码都不需要额外调整，所有按钮都会自动绑定正确的提示逻辑。

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