Html 什么'；使用jquery筛选分类的最有效方法是什么？

我对编程非常陌生，现在我有一个网站，在前端显示与我的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);
    });
});

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

 <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>

菜单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>

类别

---

我希望一切都清楚，谢谢

当用户单击

a

标签时，您可以在此处使用

click

事件获取具有不同类别的

id

，然后遍历所有

productCard

div，并检查其中的a标签是否具有与用户根据此显示该div选择的类别相同的

data slug

演示代码：

$（“.nav链接”）。单击（函数（）{
//获取标签的id
var category=$（this.attr（'id'）；
//支票不是“全部”
如果（类别！=“全部”）{
//隐藏产品部
$（“.productCard”）.hide（）；
//循环通过产品div
$（“.productCard”）。每个（函数（）{
//检查数据段塞==用户单击的类别
if（$（this）.find（“.productItem”）.attr（'data-slug'）==类别）{
$（this.show（）//显示该div
}
})
}否则{
$（“.productCard”）.show（）；
}
})

.productCard{
边框：1px纯蓝
}

类别

当用户点击

a

标签时，您可以在此处使用

点击

事件获取具有不同类别的

id

，然后循环遍历所有

productCard

div，并检查其中的a标签是否具有与用户根据此显示该div选择的类别相同的

数据slug

演示代码：

$（“.nav链接”）。单击（函数（）{
//获取标签的id
var category=$（this.attr（'id'）；
//支票不是“全部”
如果（类别！=“全部”）{
//隐藏产品部
$（“.productCard”）.hide（）；
//循环通过产品div
$（“.productCard”）。每个（函数（）{
//检查数据段塞==用户单击的类别
if（$（this）.find（“.productItem”）.attr（'data-slug'）==类别）{
$（this.show（）//显示该div
}
})
}否则{
$（“.productCard”）.show（）；
}
})

.productCard{
边框：1px纯蓝
}

类别

@Andreas如前所述，我对这种东西很陌生。谢谢：）嗨，你需要如何过滤？点击按钮？您如何知道要过滤哪个

slug

？请详细说明。@Swati-hanks为了回答，我制作了一个包含不同“slug”的菜单，可以在json文件中找到。我想在页面上填写与选定的蛞蝓产品。我将添加菜单的html到编辑！你需要过滤一下

a

标签吗？这里还有

.attr（'data-slug'，el.slug）

您正在产品的

a

标签中存储slug的值？在这里，

grond en siervuurwerk

这在你们的菜单上什么地方？@Andreas如前所述，我对这东西很陌生。谢谢：）嗨，你需要如何过滤？点击按钮？您如何知道要过滤哪个

slug

？请详细说明。@Swati-hanks为了回答，我制作了一个包含不同“slug”的菜单，可以在json文件中找到。我想在页面上填写与选定的蛞蝓产品。我将添加菜单的html到编辑！你需要过滤一下

a

标签吗？这里还有

.attr（'data-slug'，el.slug）

您正在产品的

a

标签中存储slug的值？在这里，

grond en siervuurwerk

这在您的菜单中的什么位置？感谢您提供了很好的解决方案，现在我已经很清楚了。“全部”确实起作用，但由于某些原因，id上的筛选器对我不起作用，当我按除“全部”以外的类别之一时，所有内容都被隐藏。请确保

id

和

数据段塞

应具有相同的值。。同样，在您的代码中提供了

attr（'data-name'，el.slug）应该是
attr（'data-slug'，el.slug）更改，看我做了，我现在将问题中的代码更新为我的最新代码，这样您应该可以看到它。抱歉，我忘了提及它，很遗憾。您检查了值是否相同了吗？谢谢您提供了很好的解决方案，现在我已经非常清楚了。“全部”确实起作用，但由于某些原因，id上的筛选器对我不起作用，当我按除“全部”以外的类别之一时，所有内容都被隐藏。请确保
id
和
数据段塞
应具有相同的值。。同样，在您的代码中提供了
attr（'data-name'，el.slug）应该是
attr（'data-slug'，el.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"
      },

  <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>