我在HTML文件中创建了4个按钮。我在JavaScript文件中创建了一个名为products的对象，使用大括号{}创建。在该对象中，我创建了一个名为data的Array，使用方括号[]创建。在该Array中，我创建了许多不同的对象，使用大括号{}创建。
数组中的每个对象都正确显示。现在我想创建一个过滤器，它将只显示数组中的某些对象，这取决于按下哪个按钮。
在我的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>

在我的CSS文件中，我有这样的代码：

.hide {
    display: none;
}

我用JavaScript创建的对象：

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",
        },
    ]
}

JavaScript中的filterProduct函数：

// Parameter passed from button (Parameter same as category)
function filterProduct(value) {
    // Select all elements
    let elements = document.querySelectorAll(".card");
    // Loop through the elements
    elements.forEach((element) => {
    // Display all cards on all button click
    if (value == "all") {
        element.classList.remove("hide");
    } else {
        // Check if element contains category class
        if (element.classList.contains(value)) {
            // Display elements based on category
            element.classList.remove("hide");
        } else {
            // Hide other elements
            element.classList.add("hide");
        }
    }
});
}

如果用户单击带有product 1筛选器的按钮，则只应显示类别为product 1的产品。如果用户单击带有product 2筛选器的按钮，则只应显示类别为product 2的产品。如果用户单击带有product 3筛选器的按钮，则只应显示类别为product 3的产品。如果用户单击“全部”按钮，所有的产品都应该展示出来。