jQuery基于数据属性的过滤元素 [英] jQuery filter elements based on data attribute

问题描述

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

这是我的html：

 < div id =users> 
< input name =usertype =checkboxvalue =1> 
 John 
< input name =usertype =checkboxvalue =2> 
 Mike 
< input name =usertype =checkboxvalue =3> 
 Peter< / div> 
 
< select name =products> 
< option value =4>产品1< /选项> 
< option value =5>产品2< /选项> 
< option value =6>产品3< /选项> 
< / select> 
 
< ul id =items> 
< li data-filter =1>项目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） ; 
}）; 
 
 //新闻过滤函数
函数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（）{
 $（这个）.delay（200）.slideDown（fast）; 
}）; 
} 
} 
  

我的问题现在包括复选框和部分过滤选项，但我不知道该走哪条路。我是否昏迷分离数据过滤器值，例如：data-filter =1,3，其中1是产品，3是用户，或完全添加新数据属性？

解决方案

新代码和解决方案。

I have a set of checkboxes and select list that are being used to filter elements.

Here is my 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>

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

My problem is now to include checkboxes as well as part of filtering options, but I'm not sure which way to go. Do I coma separate data-filter values like: data-filter="1,3" where 1 is product, and 3 is user, or add new data attribute entirely?

解决方案

new code and solution. https://jsfiddle.net/Cuchu/p4w5zbyh/

Html - add class 'check' in the 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");
        });
    }
}

When you change select, read a checbox selecteds and set values in a array, and then, read value to select products and add value to array. Then, the code

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

miVar1 = filter.join(",");

create a new array with element filter and the concatenate array in string, example: "li[data-filter=1],li[data-filter=2],li[data-filter=4]" and use in the filter jquery.

Test jsfiddle and check browser console to see filter.

这篇关于jQuery基于数据属性的过滤元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！