使用 jquery 过滤类别的最有效方法是什么？

Question

我对编程很陌生，现在我有一个网站，它在前端显示与我的 json 文件不同的烟花。 我制作了一个类别菜单，我想实际工作。 我想知道让这个菜单工作的最有效方法是什么。 我做了一个函数，它从我的 json 文件中返回所有现有的 json 对象，并想知道是否可以使用这个现有的函数来过滤不同的类别，并且只显示具有指定类别的项目。 我用来循环遍历所有 de json 对象的脚本是：

$(function(){
$.getJSON("assets/products/sample_products.json", function(response) {
    $.each(response.data, function (i, el) {
        let card = $($('#productCard-template').html());
        card.find('.container > p').html( el.name + '<br> &euro;' +  el.price );
        card.find('.productItem').attr('data-price', el.price)
            .attr('data-article-number', el.article_number)
            .attr('data-id', el.id)
            .attr('data-name', el.name)
            .attr('data-slug', el.slug);
        $('#touchViewProducts').append(card);
    });
});

});

过滤功能：

//filter function
$(".nav-link").click(function() {
    var category = $(this).attr('id');
    if (category != "all") {
        $(".productCard").hide();
        $(".productCard").each(function() {
            if ($(this).find(".productItem").attr('data-slug') == category) {
                $(this).show() //show that div
            }
        })
    } else {
        $(".productCard").show();
    }
})

这是数据在前端显示的模板：

 <script type="text/template" id="productCard-template">
        <div class="col-3 productCard">
            <a href="#" class="productItem">
                <div class="card">
                    <img src="assets/images/Firecracker.jpg" alt="Avatar" style="width: 100%; height: 8vh;">
                    <div class="container">
                        <p>test</p>
                    </div>
                </div>
            </a>
        </div>
    </script>

这是我的 json 文件中的代码示例，我想过滤“slug”：{

"data":[
    {
      "id":"1333",
      "article_number":"4016",
      "barcode":"heeftgeenbarcode4",
      "name":"White Albino",
      "stock":null,
      "to_sell":null,
      "price":"50",
      "brand":{
        "id":"26",
        "name":"Fireworks Festival",
        "slug":"grond-en-siervuurwerk",
        "logo_path":"\/uploads\/product-brands\/26\/5d8e3cd1a865f.png"
      },

菜单 html：

  <div class="col-3 categoriesSection">
                    <div class="categories">
                        <p style="background-color: white; margin-bottom: 0px" > Categories </p>
                        <a class="nav-link" id="all" href="#">All</a>
                        <a class="nav-link" id="black-thunder" href="#">Black-thunder</a>
                        <a class="nav-link" id="blue-eagle-fireworks" href="#">Blue-eagle-fireworks</a>
                        <a class="nav-link" id="crystal-exclusive" href="#">Crystal-exclusive</a>
                        <a class="nav-link" id="empire-fireworks" href="#">Empire-fireworks</a>
                        <a class="nav-link" id="grondbloemen" href="#">Grondbloemen</a>
                    </div>
                </div>

我希望一切都清楚，谢谢！

Answer 1

您可以使用click这里事件，当用户点击a标签获得id穿过都有不同的类别，然后将环productCard的div并检查标签里面有data-slug等于该用户依赖于本次车展已选定的类别分区

演示代码：

 $(".nav-link").click(function() { //get id of the a tag var category = $(this).attr('id'); //check is not "all" if (category != "all") { //hide product div $(".productCard").hide(); //loop through product div $(".productCard").each(function() { //check data-slug == category which user has clicked if ($(this).find(".productItem").attr('data-slug') == category) { $(this).show() //show that div } }) } else { $(".productCard").show(); } })

 .productCard { border: 1px solid blue }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-3 categoriesSection"> <div class="categories"> <p style="background-color: white; margin-bottom: 0px"> Categories </p> <a class="nav-link" id="all" href="#">All</a> <a class="nav-link" id="black-thunder" href="#">Black-thunder</a> <a class="nav-link" id="blue-eagle-fireworks" href="#">Blue-eagle-fireworks</a> <a class="nav-link" id="crystal-exclusive" href="#">Crystal-exclusive</a> <a class="nav-link" id="empire-fireworks" href="#">Empire-fireworks</a> <a class="nav-link" id="grondbloemen" href="#">Grondbloemen</a> </div> </div> <div class="col-3 productCard"> <a href="#" class="productItem" data-slug="crystal-exclusive"> <div class="card"> <img src="assets/images/Firecracker.jpg" alt="Avatar" style="width: 100%; height: 8vh;"> <div class="container"> <p>test wwrbrb crystal-exclusive</p> </div> </div> </a> </div> <div class="col-3 productCard"> <a href="#" class="productItem" data-slug="black-thunder"> <div class="card"> <img src="assets/images/Firecracker.jpg" alt="Avatar" style=""> <div class="container"> <p>testbrbr black-thunder</p> </div> </div> </a> </div> <div class="col-3 productCard"> <a href="#" class="productItem" data-slug="grondbloemen"> <div class="card"> <img src="assets/images/Firecracker.jpg" alt="Avatar" style=""> <div class="container"> <p>Soemthing 3 grondbloemen</p> </div> </div> </a> </div> <div class="col-3 productCard"> <a href="#" class="productItem" data-slug="grondbloemen"> <div class="card"> <img src="assets/images/Firecracker.jpg" alt="Avatar" style=""> <div class="container"> <p>Soemthing 2 grondbloemen</p> </div> </div> </a> </div> <div class="col-3 productCard"> <a href="#" class="productItem" data-slug="empire-fireworks"> <div class="card"> <img src="assets/images/Firecracker.jpg" alt="Avatar" style=""> <div class="container"> <p>Soemthing 2 empire-fireworks</p> </div> </div> </a> </div> <div class="col-3 productCard"> <a href="#" class="productItem" data-slug="blue-eagle-fireworks"> <div class="card"> <img src="assets/images/Firecracker.jpg" alt="Avatar" style=""> <div class="container"> <p>Soemthing 2 blue-eagle-fireworks</p> </div> </div> </a> </div>