Javascript jquery为数据匹配多个值

我想弄清楚这件事有点困难， 我基本上有以下几点：

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

---

我不知道在您的场景中是否可能，但是如果您的筛选复选框放在列表项之前，您可以使用常规sibling和属性选择器的组合

然后你会得到一个很好的，只使用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;
}

---

没有JS意味着更轻的解决方案！减少你的头痛

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

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

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

}); 

我假设如果没有选中复选框，您会希望显示所有复选框

---

您好，谢谢，这似乎是一个更好的方法…以前从未使用过map，但您似乎正在检查每个项目的所有筛选器是否匹配，基本上我想显示与示例有点冲突的任何匹配（不是所有匹配）的LI。抱歉，我的不好，事实上，这非常有效…但是当你检查两个数组的长度时，我删除了完全匹配

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

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

});