选择过滤器隐藏列表中的所有项目

Question

我正在尝试创建一个选择下拉过滤器，该过滤器可以从 rest api 动态获取其值和数据。

这是我的代码

HTML

<div class="container">
    <select data-filter="season" class="filter_category_name filter form-control"></select>
    <div class="listContent" id="listitem"></div>
</div>

JS

var data = [{
        "category_name": "1",
        "title": "One One",
        "more": [{
            "details": "some details"
        }]
    },
    {
        "category_name": "1",
        "title": "One Two",
        "more": [{
            "details": "some details"
        }]
    },
    {
        "category_name": "2",
        "title": "Two One",
        "more": [{
            "details": "some details"
        }]
    },
    {
        "category_name": "3",
        "title": "Three One",
        "more": [{
            "details": "some details"
        }]
}];


let listItems = "",
    categoryAll = "";

for(var i = 0;i < data.length; i++) {

    var title = data[i].title,
        category_name = data[i].category_name;

    listItems += "<a onclick='createAVideoContainer(" + i + ")'><div class='listItem'><p>" + title + "</p></div></div></a>";

    if (categoryAll.indexOf("<option value='" + category_name + "'>" + category_name + "</option>") == -1) {
        categoryAll += "<option value='" + category_name + "'>" + category_name + "</option>";
    }
}

$("#listitem").html(listItems);
$(".filter_category_name").append(categoryAll);

var filtersObject = {};

$(".filter").on("change",function() {
    var filterName = $(this).data("filter"),
        filterVal = $(this).val();
    
    if (filterVal == "") {
        delete filtersObject[filterName];
    } else {
        filtersObject[filterName] = filterVal;
    }
    
    var filters = "";
    
    for (var key in filtersObject) {
          if (filtersObject.hasOwnProperty(key)) {
            filters += "[data-"+key+"='"+filtersObject[key]+"']";
          }
    }
    
    if (filters == "") {
        $(".listItem").show();
    } else {
        $(".listItem").hide();
        $(".listItem").hide().filter(filters).show();
    }
});

但由于某种原因，它隐藏了所有项目，更改选项后没有任何变化

我想先加载所有项目，然后根据选项进行过滤

我希望 select 元素使用类别名称的值动态创建选项，例如第一个选项的值应该是 cars1，并显示具有相同 category_name 的所有其他对象。

注意：整个代码封装在一个异步函数中，该函数在页面加载时呈现。

这是一个正确的working js fiddle with the above problem

Answer 1

根据您的小提琴代码，最好根据季节过滤<a> 项目内 listItem 区域，因为这是构建的过滤器，而不是尝试显示/隐藏整个listItem 区域。

实现预期结果的两个小的代码更改，是在这两个代码点：

1. 在此处添加 data-season 引用到 <a> 标记，并带有 category_name 值：

   listItems += '<a data-season="' + category_name + '" ' 
             + "onclick='createAVideoContainer(" + i + ")'><div class='listItem'><p>" 
             + title + "</p></div></a>";
   

2. 更改过滤以过滤您构建的data-season 的<a> 标签：

   if (filters == "") {
       $("a").show();
   } else {
       $("a").hide();
       $("a").filter(filters).show();
   }
   

将这两个更改集成到您的小提琴示例代码中，试试下面的可运行示例：

var data = [
    {
        "category_name": "1",
        "title": "One One",
        "more": [
            {
                "details": "some details"
            }
        ]
    },
    {
        "category_name": "1",
        "title": "One Two",
        "more": [
            {
                "details": "some details"
            }
        ]
    },
    {
        "category_name": "2",
        "title": "Two One",
        "more": [
            {
                "details": "some details"
            }
        ]
    },
    {
        "category_name": "3",
        "title": "Three One",
        "more": [
            {
                "details": "some details"
            }
        ]
    },
];


let listItems = "",
  categoryAll = "";

for(var i = 0; i < data.length; i++) {

  var title = data[i].title,
      category_name = data[i].category_name;

  listItems += '<a data-season="' + category_name + '"'
            + "onclick='createAVideoContainer(" + i + ")'><div class='listItem'><p>" 
            + title + "</p></div></a>";

  if (categoryAll.indexOf("<option value='" + category_name + "'>" + category_name + "</option>") == -1) {
      categoryAll += "<option value='" + category_name + "'>" + category_name + "</option>";
  }
}

$("#listitem").html(listItems);
$(".filter_category_name").append(categoryAll);

var filtersObject = {};

//on filter change
$(".filter").on("change",function() {
  var filterName = $(this).data("filter"),
      filterVal = $(this).val();

  if (filterVal == "") {
      delete filtersObject[filterName];
  } else {
      filtersObject[filterName] = filterVal;
  }

  var filters = "";

  for (var key in filtersObject) {
        if (filtersObject.hasOwnProperty(key)) {
          filters += "[data-"+key+"='"+filtersObject[key]+"']";
       }
  }

  if (filters == "") {
      $("a").show();
  } else {
      $("a").hide();
      $("a").filter(filters).show();
  }
});

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <div class="container">
        <select data-filter="season" class="filter_category_name filter form-control"></select>
        <div class="listContent" id="listitem">
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>

这是应用了相同更改的updated fiddle。