用于显示/隐藏元素的JQuery过滤器复选框

时间:2016-10-12 13:48:09

标签: javascript jquery html css

我有下面的代码,它通过使用元素上的样式将它们隐藏在JQuery中来过滤元素。请参阅我的JSFiddle(https://jsfiddle.net/vy41zwch/4/)。

我的问题是我需要它只显示样式中列出的所有已检查过滤器的元素,而不显示任何已检查的元素。

例如,如果我选择,"红色"和"外套"它应该只显示BOX A,因为它包含两个过滤器。相反,它显示了BOX A&乙

 //filter files list
    function filterFilesList() {
        var rows = $('.file-row');  
        var checked = $("#filterControls :checkbox:checked");
        if(checked.length){
            rows.hide(200);
            checked.each(function(){
                $("." + $(this).val()).show(200);
            });
        } else {
            rows.show();
        }
    }

    $("#filterControls :checkbox").click(filterFilesList);
    filterFilesList();

1 个答案:

答案 0 :(得分:1)

您需要创建一个选择器,它是所有过滤器的组合

var selector = checked.map(function() {
    return "." + $(this).val()
}).get().join('');
$(selector).show(200);

Fiddle