jQuery根据数据属性过滤元素

Question

我有一组复选框和选择列表，用于过滤元素。

这是我的 html:

<div id="users">
  <input name="user" type="checkbox" value="1">
  John
  <input name="user" type="checkbox" value="2">
  Mike
  <input name="user" type="checkbox" value="3">
  Peter </div>

<select name="products">
  <option value="4">Product 1</option>
  <option value="5">Product 2</option>
  <option value="6">Product 3</option>
</select>

<ul id="items">
  <li data-filter="1">Item 1</li>
  <li data-filter="2">Item 2</li>
  <li data-filter="1">Item 3</li>
  <li data-filter="3">Item 4</li>
</ul>

这里是 JavaScript:

$('select[name=products]').change(function() {
    var filter = $(this).val();
    filterList(filter);
});

//News filter function
function filterList(value) {
    var list = $("#items li");
    $(list).fadeOut("fast");
    if (value == "all") {
        $("#items").find("li").each(function () {
            $(this).delay(200).slideDown("fast");
        });
    } else {
        $("#items").find("li[data-filter*=" + value + "]").each(function () {
            $(this).delay(200).slideDown("fast");
        });
    }
}

我现在的问题是包含复选框以及部分过滤选项，但我不确定该走哪条路。我是否需要分隔数据过滤器值，例如:data-filter="1,3"，其中 1 是产品，3 是用户，还是完全添加新的数据属性？

Answer 1

您选择的项目具有不同的值(value)，应该类似于

<select name="products">
  <option value="1">Product 1</option>
  <option value="2">Product 2</option>
  <option value="3">Product 3</option>
</select>

<ul id="items">
  <li data-filter="1">Item 1</li>
 <li data-filter="2">Item 2</li>
 <li data-filter="3">Item 3</li>
 <li data-filter="4">Item 4</li>
</ul>

对于用户，您必须创建一个数组并将检查的值放入其中。 然后，在下拉列表更改时，您将在数组中的每个值的末尾调用另一个函数。您可以从中获得一些想法。

 var selected = ['1','2'];
      $('selected').each(function (i) {
            $("#items").find("li[data-filter*=" + value + "]").each(function ()     {
            $(this).delay(200).slidedown("fast");
        });
    });