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

Answer 2

我已经改变了Matt的解决方案，以便它能够满足您的要求。至少我如何解释它（仅显示与所有所选类别匹配的项目）。尽管如此，它并不像Matt的解决方案那样优雅：

HTML：

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

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

和JS：

$('div.tags').delegate('input:checkbox', 'change', function() {
    $('.results > li').hide();

    var selector = $('input:checked').map(function() {
        return $(this).attr('data-category');
    }).get();

    function matchesCategories(elem) {
        var elemCats = elem.attr('data-category');

        if (elemCats) {
            elemCats = elemCats.split(' ');
        } else {
            elemCats = Array();
        }
        for (var i = 0; i < selector.length; i++) {
            console.log("testing " + selector[i] + " in:");
            console.log(elemCats);
            if (jQuery.inArray(selector[i], elemCats) == -1) {
                return false;
            }
        }
        return true;
    }
    $('.results > li').each(function(i, elem) {
        if (matchesCategories(jQuery(elem))) {
            $(elem).show();
        }
    });

}).find('input:checkbox').change();

如果你想尝试一下，这是我的jsfiddle entry (forked from Matt's)

Answer 3

试试grep function。 Pseudopseudocode：

$(yourstuff).grep(filter1).grep(filter2)...

Answer 4

两个问题。

输入选择器 - .is是一个函数，而不是选择器。
hasClass - 也不是选择器。

这些都返回true或false，因此您无法像jQuery对象那样对其结果进行操作。

http://jsfiddle.net/5z7M5/3/

 $('.tags input').click( function() {
      $('.results > li').hide();
      //For each one checked
      $('input:checked').each( function() {

           $('.'+$(this).attr('class')).show();
      });      
 });

Answer 5

$('.tags')
    .on('update', function() {
        // Limit the selector(s) to search for:
        var $filters = $(this).find('input:checked');

        // Get the class names of interest
        // Return null (rather than "") to keep them out of the result array
        var $classes = $filters.map(function(){ return this.className || null; });

        // Use .replace() if your checkboxes might target multiple classes
        var selector = $classes.get().join('.').replace(/ /g,'.');

        var $results = $('ul.results > li').hide();

        if (selector) 
            $results.filter('.'+selector).show();
    })

    // Relay any changes to the display-state container (.tags)
    .on('change','input[type="checkbox"]',function() {
        $(event.currentTarget).trigger('update');
    })

    // When first loaded, apply the server-supplied checkbox state(s) to the page:
    .trigger('update');

我非常喜欢.on（）:) [jQuery 1.7 +]

http://jsfiddle.net/ne8dy/

jQuery多个复选框页面过滤器

5 个答案:

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