使用jquery对类别进行筛选的最有效方法是什么？

Question

我对编程非常陌生，现在我有一个网站，它在前面显示了与我的json文件不同的烟花。我已经做了一个类别菜单，我想要实际工作。我想知道什么是最有效的方式来使这个菜单工作。我已经创建了一个函数，从我的json文件中返回所有现有的json对象，并且想知道是否可以使用这个现有函数对不同类别进行筛选，并且只显示带有指定类别的项。我用来循环所有de对象的脚本是：

$(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，并检查其中的a标记是否与用户所选择的类别相等，这取决于该div。

演示代码：

​

$(".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>

​