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

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

的Html - 在imputs添加类 '检查'

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

当你改变选择，读阵列中的checbox selecteds并设置值，然后，阅读值为选择产品并将值增加到数组中。 然后，代码

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

miVar1 = filter.join(","); 

创建元件过滤器和在串中的串连阵列，例如一个新的数组：“利[数据过滤器= 1]，锂[数据过滤器= 2]，利[数据-filter = 4]“并在过滤器jquery中使用。

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

Answer 2

您的选择项有不同的价值，它应该像

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

对于用户来说，你必须做出一个数组，并把检查的值在。 然后，在下拉式变化时，您将在数组中结束foreach值时调用另一个函数。你可以从中得到一些想法。

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