javascript - jquery 匹配数据的多个值

Question

我在解决这个问题时遇到了一些困难， 我基本上有以下几点:

<li data-type='filter1 filter2 filter3'>...</li>
<li data-type='filter1 filter2'>...</li>
<li data-type='filter1 filter3'>...</li>
<li data-type='filter2 filter3'>...</li>

以及要过滤的复选框列表:

<input type='checkbox' value='filter1' /> filter1
<input type='checkbox' value='filter2' /> filter2
<input type='checkbox' value='filter3' /> filter3

我希望能够根据选定的复选框过滤 LI 列表，例如，如果我选择 filter1+filter3 ，我只会看到第 1 个和第 3 个 li， 如果我选择filter1+filter2+filter3，我只会看到第一个li

我写了这段代码，但似乎没有完成这项工作，因为显然它一次匹配它们 1 个，所以开始显示以前隐藏的代码 谢谢!

$('.categoriesOnly input[type=checkbox]').change(function() {
    $('.categoriesOnly input[type=checkbox]').each(function () {
        var filter = $(this);
       $("#category-articles .movie[data-theater*='" + filter.data('theater') + "']" ).show();
        $("#category-articles .movie").not("[data-theater*='" + filter.data('theater') + "']").hide();
}...

Answer 1

您的方法存在几个问题。第一个主要问题是您的隐藏/显示将仅基于复选框循环中的最后一个复选框。

下一个问题是您一次只检查一个值，但需要检查多个匹配项。

下面创建一个已选中复选框值的数组，然后通过创建每个 LI“过滤器”的数组来与复选框值数组进行比较，从而过滤掉匹配的 LI

var $checkboxes = $('.categoriesOnly :checkbox').change(function () {
    /* create array of allowed "filters" */
    var allowedFiltersArray = $checkboxes.filter(':checked').map(function () {
        return this.value
    }).get();
    /* hide all li then filter matches to show */
    $('li[data-type]').hide().filter(function () {
        /* if no chechboxes checked show all */
        if (!allowedFiltersArray.length) {
            return true
        }
        /* create array of filters for this li */
        var filters = $(this).data('type').split(' ');
        /* can't be a match if length of both arrays is different  */
        if (filters.length !== allowedFiltersArray.length) {
            return false
        }
        /* now do the matching of each array */
        var inValid = $.grep(allowedFiltersArray, function (filterValue) {
            return $.inArray(filterValue, filters) === -1;
        }).length;
        return !inValid
    }).show();

}); 

我假设如果没有检查任何复选框，您会想要显示全部

DEMO