jquery匹配多个数据值

jquery match several values for data

本文关键字：数据 jquery      更新时间：2023-09-26

我很难弄清楚这一点，我基本上有以下几种：

<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，我将只看到第一个和第三个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();
}...

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

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

下面创建一个复选框值的数组，然后通过创建每个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

我不知道在您的场景中是否可能，但如果您的过滤器复选框被放置在列表项之前，您可以使用通用Sibilings和属性选择器的组合。

然后你会得到一个很好的，只有css的方法。类似于：

li[data-type] {
    display: none;
}
input[value="filter1"]:checked ~ ul li[data-type~="filter1"] {
    display: block;
}
input[value="filter2"]:checked ~ ul li[data-type~="filter2"] {
    display: block;
}
input[value="filter3"]:checked ~ ul li[data-type~="filter3"] {
    display: block;
}

http://jsfiddle.net/02j4vnc3/1/

没有JS意味着更轻松的解决方案！不那么头疼

相关文章：