如何在JS商品筛选脚本中移除productName重复的商品？

问题说明 #

原脚本切换到"all"分类时，会重复展示属于多个分类的商品——原因是页面中存在同一商品的多份.card元素副本。需要修改逻辑，确保"all"分类下每个商品仅显示一次。

原脚本 #

function filterProduct(value) {

    let buttons = document.querySelectorAll(".button-value");
    buttons.forEach((button) => {

      if (value.toUpperCase() == button.innerText.toUpperCase()) {
        button.classList.add("active");
      } else {
        button.classList.remove("active");
      }
    });

    let elements = document.querySelectorAll(".card");

    elements.forEach((element) => {

      if (value == "all") {
        element.classList.remove("hide");
      } else {

        if (element.classList.contains(value)) {

          element.classList.remove("hide");
        } else {

          element.classList.add("hide");
        }
      }
    });
  }

修改后的脚本 #

function filterProduct(value) {
    // 更新筛选按钮激活状态
    const buttons = document.querySelectorAll(".button-value");
    buttons.forEach(button => {
        if (value.toUpperCase() === button.innerText.toUpperCase()) {
            button.classList.add("active");
        } else {
            button.classList.remove("active");
        }
    });

    const elements = document.querySelectorAll(".card");
    if (value === "all") {
        const displayedProducts = new Set();
        elements.forEach(element => {
            // 用自定义属性data-product-id标识唯一商品，需提前添加到.card元素上
            const productUniqueId = element.getAttribute("data-product-id");
            
            if (!productUniqueId) {
                // 无唯一标识的商品默认显示，可根据需求调整
                element.classList.remove("hide");
                return;
            }

            if (displayedProducts.has(productUniqueId)) {
                element.classList.add("hide");
            } else {
                element.classList.remove("hide");
                displayedProducts.add(productUniqueId);
            }
        });
    } else {
        // 保留原有分类筛选逻辑
        elements.forEach(element => {
            if (element.classList.contains(value)) {
                element.classList.remove("hide");
            } else {
                element.classList.add("hide");
            }
        });
    }
}

关键改动说明 #

1. 新增去重逻辑：使用Set集合存储已显示的商品唯一ID，避免重复展示
2. 依赖唯一标识：需要给每个.card元素添加data-product-id属性，值为商品的唯一标识（如SKU、数据库ID），示例：

   <div class="card" data-product-id="prod-1001" class="electronics clothing">...</div>
   

3. 兼容无标识场景：如果部分商品没有唯一标识，默认保持显示（可根据需求修改这部分逻辑）
4. 保留原有筛选逻辑：非"all"分类的筛选逻辑完全不变，不影响其他功能

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