jQuery多个复选框页面过滤器

Question

我一直在试图弄清楚如何正确地做到这一点,似乎无法让它发挥作用.

我想使用jQuery从本质上挑选我想要在页面上显示的内容.我看了,试图找到一些脚本,某种有效,但不是我想要的.

该页面将使用复选框作为"标签",让我们说艺术,电脑,健康,视频游戏

 <div class="tags">
 <label><input type="checkbox" class="arts" /> Arts </label>
 <label><input type="checkbox" class="computers" /> Computers </label>
 <label><input type="checkbox" class="health" /> Health </label>
 <label><input type="checkbox" class="video-games" /> Video Games </label>
 </div>

然后在页面上会有结果,每个结果都附有标签.

 <ul class="results">
 <li class="arts computers">
     Result 1
 </li>
 <li class="video-games">
     Result 2
 </li>
 <li class="computers health video-games">
     Result 3
 </li>
 <li class="arts video-games">
     Result 4
 </li>
 </ul>

我希望能够点击艺术和视频游戏,它将显示包含艺术和视频游戏的所有内容,因此结果为4.或者只能选择计算机并获得结果1和3.

我以为我可以做一些事情

 $('.tags input').click( function() {
      $('.results > li').hide();
      //For each one checked
      $('input').is(':checked').each( function() {
           //Display that result
           $('.results li').hasClass($(this).attr('class')).show();
      });      
 });

但它不起作用,它只是隐藏了一切,但后来又没有回来显示其余部分.我知道逻辑是完全错误的,我不认为我应该以这种方式使用每一个？也许用它来获取数组中的所有类然后显示具有这些类的li？

有任何想法吗？

Answer 1

• 使用.change()复选框的事件.
• .hasClass()返回一个布尔值.
• 更有意义来存储信息以外的属性class,诸如rel或data-*属性.

$('div.tags').delegate('input:checkbox', 'change', function()
{
     var $lis = $('.results > li').hide();
     $('input:checked').each(function()
     {
          $lis.filter('.' + $(this).attr('rel')).show();
     });      
}).find('input:checkbox').change();

演示:http://jsfiddle.net/mattball/d2v4Q/

@Justin问道

你如何改变它只返回匹配所有复选框而不是其中任何一个的lis？

东西(无论属性您正在使用)从各检查输入到一个数组,String.join('.')它创建一个大的类选择,然后.filter()将<li>S作为前:

var selector = $('input:checked').map(function ()
{
    return $(this).attr('rel');
}).get().join('.');
$lis.filter(selector).doWhatever();