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

JQuery filter checkboxes to show / hide elements

本文关键字：隐藏 元素 显示 过滤器 复选框 JQuery      更新时间：2023-09-26

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

我的问题是，如果我需要它只显示元素，在样式中列出的所有选中的过滤器，而不显示任何选中的元素。

例如，如果我选择"红色"answers"外套"，它应该只显示BOX A，因为它包含两个过滤器。相反，它显示了方框A &b . 

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

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

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

小提琴

相关文章：