基于数据属性的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

您选择的项目具有不同的价值，应该是这样的

<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");
        });
    });

Answer 2

新代码和解决方案。 https://jsfiddle.net/Cuchu/p4w5zbyh/

Html - 在输入中添加类“检查”

<div id="users">
  <input class="check" name="user" type="checkbox" value="1">
  John
  <input class="check" name="user" type="checkbox" value="2">
  Mike
  <input class="check" 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 checkedValue = new Array(); 

        var inputElements = document.getElementsByClassName('check');
        for(var i=0; inputElements[i]; ++i){
      if(inputElements[i].checked){
           checkedValue.push(inputElements[i].value);
      }
        }

      var list = $("#items li");
    $(list).fadeOut("fast");

    if (value == "all") {
          $("#items").find("li").each(function () {
            $(this).delay(200).slideDown("fast");
        });
    } else {
        if(checkedValue.indexOf(value) < 0) {
            checkedValue.push(value);
        } 

        filter = new Array;

        checkedValue.forEach(function(entry) {
        filter.push("li[data-filter=" + entry + "]");

                });

        miVar1 = filter.join(",");
        console.log(miVar1);

            $("#items").find(miVar1).each(function () {
            $(this).delay(200).slideDown("fast");
        });
    }
}

当您更改选择时，读取复选框选择并在数组中设置值，然后将值读取到选择产品并将值添加到数组中。 然后，代码

filter = new Array;
checkedValue.forEach(function(entry) {
    filter.push("li[data-filter=" + entry + "]");
});

miVar1 = filter.join(",");

创建一个新数组，其中包含元素过滤器和字符串中的连接数组，例如：“li[data-filter=1],li[data-filter=2],li[data-filter=4]”并使用过滤器 jquery。

测试 jsfiddle 并检查浏览器控制台以查看过滤器。