如何根据选中按钮显示对应分类的产品图片？

要完成你需要的筛选功能，核心是确保产品卡片生成时包含对应分类的类名，再配合你已有的filterProduct函数即可实现。以下是完整的实现方案：

1. 完善HTML结构 #

添加产品卡片的容器，用来承载动态生成的产品：

<div id="buttons">
   <button id="all" class="button-value" onclick="filterProduct('all')">All</button>
   <button id="product1" class="button-value" onclick="filterProduct('product1')">Product 1</button>
   <button id="product2" class="button-value" onclick="filterProduct('product2')">Product 2</button>
   <button id="product3" class="button-value" onclick="filterProduct('product3')">product3</button>
</div>
<!-- 产品卡片容器 -->
<div id="product-container"></div>

2. 动态生成带分类类名的产品卡片 #

编写函数动态渲染产品，每个卡片除了基础的card类，还要加上对应产品的category值作为类名，这样筛选函数才能识别：

let products = {
    data: [
        {
            productName: "Item 1",
            category: "product1",
            price: "30",
            image: "image-of-the-product-1.jpg",
        },
        {
            productName: "Item 2",
            category: "product2",
            price: "49",
            image: "image-of-the-product-2.jpg",
        },
        {
            productName: "Item 3",
            category: "product3",
            price: "99",
            image: "image-of-the-product-3.jpg",
        },
    ]
};

// 渲染产品卡片的函数
function renderProducts() {
    const container = document.getElementById("product-container");
    container.innerHTML = ""; // 清空容器避免重复渲染
    products.data.forEach(product => {
        const card = document.createElement("div");
        // 同时添加card类和对应分类的类
        card.classList.add("card", product.category);
        card.innerHTML = `
            <img src="${product.image}" alt="${product.productName}">
            <h3>${product.productName}</h3>
            <p>Price: $${product.price}</p>
        `;
        container.appendChild(card);
    });
}

// 页面加载完成后渲染所有产品
window.addEventListener("load", renderProducts);

3. 保留并验证筛选函数 #

你已有的filterProduct函数逻辑正确，直接使用即可：

function filterProduct(value) {
    const 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");
            }
        }
    });
}

4. 补充CSS样式（可选） #

除了已有的.hide类，添加基础卡片样式让页面更美观：

.hide {
    display: none;
}

.card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem;
    width: 220px;
    display: inline-block;
    text-align: center;
    transition: all 0.3s ease;
}

.card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.button-value {
    padding: 0.5rem 1.2rem;
    margin: 0 0.3rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
}

.button-value:hover {
    background-color: #f5f5f5;
}

关键注意点 #

• 必须给每个产品卡片添加对应分类的类名，否则筛选函数无法匹配到对应元素
• 页面加载时要调用renderProducts函数，确保初始状态下所有产品都显示
• 点击按钮时，filterProduct函数通过添加/移除.hide类来控制元素的显示隐藏

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