Question

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

我应该隐藏evry＆lt; li>没有选中复选框的值。如何在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*/));
    });

Answer 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。

多个数组上的jquery过滤器

1 个答案: