基于数据属性的jQuery过滤器元素

我有一组复选框和用于筛选元素的选择列表

这是我的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>

---

我现在的问题是包括复选框以及部分过滤选项，但我不确定该怎么做。我是使用单独的数据筛选值，如：data filter=“1,3”，其中1是产品，3是用户，还是完全添加新的数据属性？

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

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

新代码和解决方案

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>

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

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

---

是的，选择值与用户值不同，因此它需要使用复选框和选择框两种方式工作。您可以添加事件以单击复选框并执行函数，读取选择选项和复选框值。您的JSFIDLE不能对产品和用户都正常工作。为什么？？我测试和工作很好！检查控制台并查看过滤器。。或者删除缓存并尝试使用JSFIDLE。你明白解释吗？或者你的选择是和？？如果选中john（值1）并选择Product 2（值5），则可以看到data filter=1或data filter=5的li。如果需要和，li属性不好，需要使用两个属性或conbine值，例如：user\u product（1\u 5）它在Firefox中肯定不工作，console显示一个空字符串。

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

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

$('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(",");