jquery过滤多个数组答案

【问题标题】：jquery filter on multiple arrayjquery过滤多个数组
【发布时间】：2017-08-30 08:49:20
【问题描述】：

HTML

<ul>
    <li data-filters={["red","green","blue"]}>x</li>
    <li data-filters={["red","green","yellow"]}>x</li>
    <li data-filters={["white","green","gray"]}>x</li>
</ul>

JQUERY

var searchIDs = []; // array used to filter
        $( ".filter_check input:checkbox:checked" ).map(function(){
            searchIDs.push($(this).val());
        });

我应该隐藏所有没有用复选框选中的值的

。在jquery中怎么做？

更新

这可行，但只选择一个复选框。我需要选择多个复选框

$('#container li').each(function(){
            if (!$(this).data('filters').includes(searchIDs)) {
                $(this).hide();
            } else {
                $(this).show(); 
            }
        })

更新

var searchIDs = [];
    function togRow(searchIDs) {
            $('#container_box_result li').each(function(){
                $(this).toggle(
                    searchIDs.every(function (id) {
                        return $(this).data('filters').includes(id)
                    }, this)
                    );
            })
        }

    $(document).on('change', '.filter_check input',function(event){
        event.preventDefault();
        searchIDs = [];
        $( ".filter_check input:checkbox:checked" ).map(function(){
            searchIDs.push($(this).val());
        });
        console.log(searchIDs);

        togRow($(this).val().split(/\s*,\s*/));
    });

【问题讨论】：

为您的代码添加 jsfiddle 或 sn-p

标签： jquery arrays checkbox filter

【解决方案1】：

您可以像这样使用every 和toggle：

function search(searchIDs) {
    $('#container li').each(function(){
        $(this).toggle(
            searchIDs.every(function (id) {
                return $(this).data('filters').includes(id)
            }, this)
        );
    })
}

$('input').on('input', function() {
    search($(this).val().split(/\s*,\s*/));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Search: <input>
<ul id="container">
    <li data-filters='["red","green","blue"]'>red, green, blue</li>
    <li data-filters='["red","green","yellow"]'>red, green, yellow</li>
    <li data-filters='["white","green","gray"]'>white, green, gray</li>
</ul>

这假定 searchIDs 中的值必须全部包含在内，条目才可见。如果您希望它的行为使得一个匹配就足够了，请在代码中将 every 更改为 some。

【讨论】：

完美解决方案！