php - 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()返回一个 bool 值。
• 将该信息存储在 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/

---

@贾斯汀问

How would you change this to return only the lis that match all of the checked boxes instead of any one of them?

将每个已检查输入的内容(无论您使用的是什么属性)放入数组中，String.join('.')它创建一个大类选择器，然后是 .filter() <li> s 和以前一样:

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