使用jQuery过滤复选框 [英] Filtering with checkboxes using jQuery

问题描述

我想用复选框过滤一些内容。

我设法做到了这一点，这要归功于 DEMO 。

我的问题是每个内容项目可能有多个类别附加。当我选择类别A和B类，然后取消选择类别B，这两个类别附加的内容项目被删除。

我正在处理的项目将包含多于两类。内容项目可以包含多个类别

HTML：

 < ul id =filters> 
< li> 
< input type =checkboxvalue =categoryaid =filter-categorya/> 
< label for =filter-categorya>类别A< / label> 
< / li> 
< li> 
< input type =checkboxvalue =categorybid =filter-categoryb/> 
< label for =filter-categoryb>类别B< / label> 
< / li> 
< / ul> 
 
< div class =categorya categoryb> A，B< / div> 
< div class =categorya> A< / div> 
< div class =categorya> A< / div> 
< div class =categorya> A< / div> 
< div class =categoryb> B< / div> 
< div class =categoryb> B< / div> 
< div class =categoryb> B< / div> 
  

Javascript：

 <如果（！$（this））点击（函数（）{
 var category = $（this）.val（）; 
 
， （）; 
 
'）; $ 
  

解决方案

我认为两种最直接的方法是点击任何过滤器复选框：
$ b $ ol

全部隐藏 < div> 元素，然后遍历复选框并为每个选中的元素循环 .show（） < div> 元素与相关的类别。

循环所有复选框以显示要显示的类的列表，然后遍历< div> 元素，检查每个元素是否具有其中的一个类， .hide（）或 .show（）。

您可以使用选择器来获取所有< div> 元素？他们是否有特定的容器元素，比如所有复选框是#filters的后代？

  //解决方案1 ​​
 
 $（＃filters：checkbox）。click（function（）{
 $（div）。hide（）; 
 $（＃filters：checkbox： （）（）。。$（$）$。$（$）$。$（$）$。 
  

演示： http://jsfiddle.net/6wYzw/41/

  //解决方案2 
 $ b $（＃filters：checkbox：checked）。map（function（）{$ b $（＃filters：checkbox）。click（function（）{
 
 var re = new RegExp 
 return this.value; 
））。get（）。join（|））; 
 $（div）。each（function（）{
 var $ this = $（this）; 
 $ this [re.source！=&& re.test（$ this.attr（class））？show：hide]（ ）; 
}）; 
}）; 
  

演示： http://jsfiddle.net/6wYzw/42/

我想第一种方法更短，并且更容易维护...

I want to filter some content using checkboxes.

I've managed to do that thanks to an earlier post which I've simplified a bit here DEMO.

My problem is that each content item can have more than one category attached.When I select category A and category B and then deselect category B, the content item that have both categories attached are removed.

The project I'm working on is going to contain more than two categories. A content item can have many categories attached

HTML:

<ul id="filters">
    <li>
        <input type="checkbox" value="categorya" id="filter-categorya" />
        <label for="filter-categorya">Category A</label>
    </li>
    <li>
        <input type="checkbox" value="categoryb" id="filter-categoryb" />
        <label for="filter-categoryb">Category B</label>
    </li>
</ul>

<div class="categorya categoryb">A, B</div>
<div class="categorya">A</div>
<div class="categorya">A</div>
<div class="categorya">A</div>
<div class="categoryb">B</div>
<div class="categoryb">B</div>
<div class="categoryb">B</div>

Javascript:

$('input').click(function() {
    var category = $(this).val();

    if (!$(this).attr('checked')) $('.' + category).hide();
    else $('.' + category).show();

});

解决方案

I think the two most straightforward approaches would be on click of any of the filter checkboxes either:

1. Hide all <div> elements, then loop through the checkboxes and for each checked one .show() the <div> elements with the associated category.

2. Loop through all checkboxes to make a list of the classes to be shown, then loop through the <div> elements, checking each one to see if it has one of those classes and .hide() or .show() as appropriate.

Is there some general selector you can use to get all the <div> elements? Do they have a particular container element, like how all the checkboxes are descendents of "#filters"?

// Solution 1

$("#filters :checkbox").click(function() {
   $("div").hide();
   $("#filters :checkbox:checked").each(function() {
       $("." + $(this).val()).show();
   });
});

Demo: http://jsfiddle.net/6wYzw/41/

// Solution 2

$("#filters :checkbox").click(function() {

   var re = new RegExp($("#filters :checkbox:checked").map(function() {
                          return this.value;
                       }).get().join("|") );
   $("div").each(function() {
      var $this = $(this);
      $this[re.source!="" && re.test($this.attr("class")) ? "show" : "hide"]();
   });
});

Demo: http://jsfiddle.net/6wYzw/42/

I guess the first way is shorter, and easier to maintain...

这篇关于使用jQuery过滤复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！