Question

也许有一种更简单的方法，但我对jQuery很新，所以请耐心等待......基本上，我正在尝试创建一个包含所选复选框的所有值的数组，然后隐藏div不包含所有的值。下面是一些粗略的标记，只是为了帮助说明我正在尝试做什么。

/*** Sample Markup ***/
<div id="item-wrapper">
 <div class="blue red green ivory">Item 32323</div>
 <div class="green red">Item 34234</div>
 <div class="ivory blue green">Item 39403</div>
 <div class="red blue">Item 39923</div>
 <div class="green">Item 32990</div>
</div>

<input type="checkbox" class="checkbox-filter" name="filter[]" value="red" CHECKED />RED
<input type="checkbox" class="checkbox-filter" name="filter[]" value="ivory" />IVORY
<input type="checkbox" class="checkbox-filter" name="filter[]" value="blue" CHECKED />BLUE
<input type="checkbox" class="checkbox-filter" name="filter[]" value="green" />GREEN

在此示例中，选中“RED”和“BLUE”复选框。我想找到div＃item-wrapper中的所有div，它们不包含红色和蓝色并隐藏它们。因此，结果将是：

<div id="item-wrapper">
 <div class="blue red green ivory">Item 32323</div>
 <div class="green red">Item 34234</div>
 <div class="ivory blue green" style="display:none">Item 39403</div>
 <div class="red blue">Item 39923</div>
 <div class="green" style="display:none">Item 32990</div>
</div>

我一直在阅读有关比较数组，迭代它们等的方法，但到目前为止，我一直没有找到解决方案。坦率地说，我并不完全清楚我应该搜索什么，这将包含我在这里要做的事情，所以我希望有人可以提供帮助。

以下是尝试让某些事情发挥作用的非常蹩脚的尝试，但它可能完全没用......

var selectedFilters = [];
  $('input.checkbox-filter').live('click',function() {
    $('input.checkbox-filter').each(function() {
        if($(this).is(':checked')) {
          selectedFilters.push($(this).val());
        }
    });

            $('#item-wrapper div').each(function() {
                var str = $(this).attr('class').split(' ');


                /*** And, this is where I got lost ***/


            });
        });

Answer 1

尝试

var $divs = $('#item-wrapper > div')
var $checks = $('input[name="filter[]"]');
$checks.change(function(){
    var classes = $checks.filter(':checked').map(function(){
        return this.value
    }).get();
    if(classes.length){
        $divs.hide().filter('.' + classes.join('.')).show();
    } else {
        $divs.show();
    }
}).change()

演示：Fiddle

Answer 2

在内部循环中，您只需检查每个类的.hasClass：

var item = $(this);
selectedFilters.forEach(function(filter) {
    if (!item.hasClass(filter)) {
        item.hide();
    } 
});

（另外，请确保在“click”处理程序中声明或清除selectedFilters。）

Here is a Fiddle

jQuery - 如果它不包含许多类中的一个，则隐藏div

2 个答案: