Question

我正在创建一个类似于此jsfiddle演示中的过滤器：http://jsfiddle.net/nJUb3/1/

当您在这个小提琴示例中检查红色和黄色时，它会显示包含它们的花朵。我试图改变它以显示红色或黄色的所有花朵。它要么回到这个状态，要么改为显示花朵的地方只有红色，只检查红色或鲜花只有黄色（并且在检查黄色也会红色时会忘记红色）。

$('.flowers-wrap,.planets-wrap').delegate('input[type=checkbox]', 'change', function() {
    var $lis = $('.flowers > div'),
        $checked = $('input:checked');
    if ($checked.length) {
        var selector = '';
        $($checked).each(function(index, element) {
            selector += "[data-category~='" + element.id + "']";
            alert(selector);
        });
        $lis.hide();
        $('.flowers > div').filter(selector).show();
    } else {
        $lis.show();
    }
});

我想要的是(red or yellow) and (small,med,large) and (mars, venus)。如何更改这个小提琴示例，让它按我想要的方式工作？感谢。

Answer 1

当您遍历所有选中的元素时，您不需要使用每个选中复选框的element.id创建一个可以显示的选择器。像这样的东西：

$('.flowers-wrap,.planets-wrap').delegate('input[type=checkbox]', 'change', function() {
    var $lis = $('.flowers > div'),
        $checked = $('input:checked');  
    if ($checked.length) {  
        $lis.hide(); 
        $($checked).each(function(index, element) {                     
            $("[data-category~='" + element.id + "']").show();                            
        });                                              
    } else {
        $lis.show();
    }
});

Answer 2

您所要做的就是将$('.flowers-wrap,.planets-wrap').delegate('input[type=checkbox]', 'change', function() { var $lis = $('.flowers > div'), $checked = $('input:checked'); if ($checked.length) { var selectors = [];//declare empty array named selectorS $($checked).each(function(index, element){ selectors.push("[data-category~='" + element.id + "']"); }); $lis.hide(); selectors.forEach(function(selector){//iterate over elements $('.flowers > div').filter(selector).show(); }) } else { $lis.show(); } });变量声明更改为空数组而不是空字符串，然后迭代其内容过滤每个项目：

{{1}}

带有类别的jquery复选框过滤器

2 个答案: