如何用JavaScript实现产品分类筛选并解决重复渲染问题？

问题根源 #

每次点击筛选按钮时，你直接往.row容器里追加新的产品卡片，没有清空之前的内容，导致重复点击会持续添加相同产品。

核心解决方法 #

在渲染新分类产品前，先清空.row容器的内容，确保每次点击都重新渲染对应分类的产品，避免重复。

修改后的JavaScript代码 #

const arr = [
    {
        "id": "1",
        "Name": "Coke 500ml",
        "Price": "80",
        "Quantity": "50",
        "Category": "bike"
    },
    {
        "id": "2",
        "Name": "Cake",
        "Price": "150",
        "Quantity": "40",
        "Category": "clothing"
    },
    {
        "id": "3",
        "Name": "Beef Ribs",
        "Price": "100",
        "Quantity": "50",
        "Category": "clothing"
    },
    {
        "id": "4",
        "Name": "Cabbage Salad",
        "Price": "50",
        "Quantity": "30",
        "Category": "clothing"
    },
    {
        "id": "5",
        "Name": "Cake",
        "Price": "150",
        "Quantity": "30",
        "Category": "bike"
    },
    {
        "id": "6",
        "Name": "Beef Ribs",
        "Price": "100",
        "Quantity": "30",
        "Category": "bike"
    }
];

const row = document.querySelector('.row')

function filterArrayByCategory(category) {
    // 清空容器原有内容
    row.innerHTML = '';
    
    const filteredProducts = arr.filter(el => el.Category === category);

    // 用forEach替代map，遍历渲染语义更准确
    filteredProducts.forEach(element => {
        const div = document.createElement('div')
        div.className = 'col-lg-4 col-md-4 col-sm-6 col-12 p-3'
        div.innerHTML = `
                    <div class="card" style="width: 18rem; height: 100% ">
                            <div class="card-body">
                          <h5 class="card-title">${element.Name}</h5>
                           <p class="card-text">${element.Category}</p>
                            </div>
                    </div>
                            `
        row.appendChild(div)
    });
}

额外优化：添加按钮激活状态 #

为了让用户清晰知道当前筛选的分类，可以给按钮添加激活样式：

新增CSS样式 #

button.active {
    background-color: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

更新JavaScript逻辑 #

function filterArrayByCategory(category) {
    // 清空容器
    row.innerHTML = '';
    // 重置所有按钮的激活状态
    document.querySelectorAll('button').forEach(btn => btn.classList.remove('active'));
    // 给当前点击的按钮添加激活类
    event.target.classList.add('active');
    
    const filteredProducts = arr.filter(el => el.Category === category);

    filteredProducts.forEach(element => {
        const div = document.createElement('div')
        div.className = 'col-lg-4 col-md-4 col-sm-6 col-12 p-3'
        div.innerHTML = `
                    <div class="card" style="width: 18rem; height: 100% ">
                            <div class="card-body">
                          <h5 class="card-title">${element.Name}</h5>
                           <p class="card-text">${element.Category}</p>
                            </div>
                    </div>
                            `
        row.appendChild(div)
    });
}

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