jQuery 多复选框页面过滤器 [英] jQuery Multiple Checkbox Page Filter

问题描述

我一直在试图弄清楚如何正确执行此操作，但似乎无法使其正常工作.

I've been trying to figure out how to do this properly and cannot seem to get it to work.

我想使用 jQuery 从本质上挑选我想在页面上显示的内容.我已经查看并试图找到一些脚本，有些工作，但不是我想要的.

I want to use jQuery to essentially pick and choose what I want to show on a page. I've looked and tried to find some script, some kind of worked but not really how I wanted it to.

页面将使用复选框作为标签"，比如艺术、计算机、健康、视频游戏

The page will use checkboxes as "tags", let's say arts, computers, health, video games

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

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

Then on the page there will be results and each result has tags attached to it.

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

I want to be able to click on arts and video games and it will display everything that has both arts AND video-games, so result 4. Or be able to just choose computers and get back results 1 and 3.

我在想我可以做一些类似的事情

I was thinking I could do something along the lines of

 $('.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();
      });      
 });

但它不起作用，它只是隐藏了所有内容，然后不会回来显示其余部分.我知道逻辑完全错误，我认为我不应该以这种方式使用 each 吗?也许用它来抓取数组中的所有类，然后显示具有这些类的 li?

but it doesn't work, it just hides everything but then doesn't come back to show the rest. I know the logic is completely wrong, I don't think i'm supposed to use the each in that way? Maybe use it to grab all of the classes in an array then show the li's that have those classes?

有什么想法吗?

推荐答案

• 使用复选框的 .change() 事件.
• .hasClass() 返回一个布尔值.
• 将这些信息存储在 class 之外的属性中更有意义，例如 rel 或 data-* 属性.
  • Use the .change() event of the checkbox.
  • .hasClass() returns a boolean.
  • It makes more sense to store that information an attribute other than class, such as rel or a data-* attribute.

  $('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/

  <小时>

  @贾斯汀问

  Demo: http://jsfiddle.net/mattball/d2v4Q/

  ---

  @Justin asks

  您将如何更改此设置以仅返回匹配所有选中框而不是其中任何一个的 lis?

  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 和以前一样:

  Stuff (whatever attribute you're using) from each checked input into an array, String.join('.') it to create one big class selector, and then .filter() the <li>s as before:

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

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