1

也许有一种更简单的方法，但是我对 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 ***/


            });
        });
4

2 回答 2

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

演示：小提琴

于 2013-10-17T00:36:04.337 回答
0

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

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

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

这是一个小提琴

于 2013-10-17T00:33:03.940 回答