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

问题描述

我想用jQuery来挑选自己喜欢的东西我想在页面上显示的内容。我已经看了，试图找到一些脚本，一些工作，但不是真的如何我想它。

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

 < div class =tags> 
< label>< input type =checkboxclass =arts/>艺术< / label> 
< label>< input type =checkboxclass =computers/>电脑< / label> 
< label>< input type =checkboxclass =health/>健康< / label> 
< label>< input type =checkboxclass =video-games/>视频游戏< / label> 
< / div> 
  

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

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

我希望能够点击艺术和电子游戏，它会显示一切既有艺术和电子游戏，所以结果4.或能够只选择电脑，并得到结果1和3。

我想我可以做一些沿线

  $（'。tags input'）。click（function（）{
 $（'。results> （'：checked'）。each（function（）{
 // Display（）; 
 //对于每一个检查
 $（'input'）。结果
 $（'。results li'）。hasClass（$（this）.attr（'class'））。show（）; 
}）; 
}）; 
  

但它不起作用，它只是隐藏了一切，但不回来显示休息。我知道逻辑是完全错误的，我不认为我应该用这种方式？也许用它来抓取数组中的所有类，然后显示具有这些类的li？

任何想法？

解决方案

• 使用复选框的 .change（）事件。 b $ b
• .hasClass（）返回一个布尔值。将该信息存储为 class 之外的其他属性，如 rel 或 data - * 属性。
  
  
  $ hr
  $ b

    $（'div.tags'）。delegate（'input：checkbox'，'change'，function（）
   {
   var $ lis = $（'。results> li'）。 （）; 
   $（'input：checked'）。each（function（）
   {
   $ lis.filter（'。'+ $（this）.attr（'rel'） ）.show（）; 
  }）; 
  }）。find（'input：checkbox'）。change（）; 
    

  
  
  

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

  
  
  

  ---

  
  
  

  @Justin问

  
  

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

  
  

  从每个检查过的输入中选择一个数组（code> String.join（'。'） 它创建一个大类选择器，然后 .filter（） < li> s像以前一样：
  
  

    var selector = $（'input：checked'）。map（function（）
   {
   return $（this）.attr（'rel'）; 
  }）。get（）。join（'。'）; 
   $ lis.filter（selector）.doWhatever（）; 
    

  
  

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

  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>
  

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

  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?

  Any Ideas?

  解决方案

  • 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();
  

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

  ---

  @Justin asks

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

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