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

Question

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

当您在这个 fiddle 示例中检查红色和黄色时，它会显示包含这两种颜色的花朵。我尝试将其更改为以红色或黄色显示所有花朵。它要么返回到此状态，要么更改为在仅检查红色时显示仅红色花朵的位置，或仅在检查黄色时显示红色花朵(并且在检查黄色时忘记红色也与红色)。

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

我想要的是(红色或黄色)和(小，中，大)和(火星，金星)。如何更改这个 fiddle 示例以使其按照我想要的方式工作？谢谢。

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