javascript - 选择复选框以过滤匹配所有选择的结果

Question

我有 3 个在结果之间切换的复选框。它按原样工作，但是，我希望能够同时使用多个复选框进行过滤。

例如，如果勾选了high 和bread，它应该只显示一个结果，因为它只匹配一个div。目前它正在显示任何带有 high 或 bread 的内容。

https://jsfiddle.net/f7srx0dd/12/

<input type="checkbox" class="checkbox" name="High" data-category-type="high">High
<input type="checkbox" class="checkbox" name="low" data-category-type="low" > 
<input type="checkbox" class="checkbox" name="low" data-category-name="bread" > 

<div id="Categories">
    <div class="hide" data-category-type="high" data-category-name="pizza">high</div>
    <div class="hide" data-category-type="low" data-category-name="pasta">low</div>
    <div class="hide" data-category-type="low" data-category-name="pizza">low</div>
    <div class="hide" data-category-type="high" data-category-name="bread">bread</div>
</div>

$('.checkbox ').on('click', function (e) {



var $this = $(this),
    $links = $('.checkbox');

if ($this.hasClass('selected')) {
    $this.removeClass('selected');
} else {
    $this.addClass('selected');
}

$('#Categories > div').hide();
var anySelectedCheckbox = false;
$.each($links, function (k, v) {

    $this = $(v);

    if ($this.hasClass('selected')) {
        anySelectedCheckbox = true;
        var cat = $this.data('categoryType');
        var nam = $this.data('categoryName');
        $('#Categories > div[data-category-type="'+cat+'"]').show();
        $('#Categories > div[data-category-name="'+nam+'"]').show();
    }

});

if(!anySelectedCheckbox) {
$('#Categories > div').show();

}


});

Answer 1

我会通过保持一个运行过滤器来做到这一点，过滤器匹配复选框。首先选择所有结果作为 jQuery 对象。然后，对于每个复选框，过滤 jQuery 对象以仅匹配那些特定的:

var selectedDivs = $('#Categories > div').hide();
var anySelectedCheckbox = false;
$.each($links, function (k, v) {

    $this = $(v);

    if ($this.hasClass('selected')) {
        anySelectedCheckbox = true;
        var cat = $this.data('categoryType');
        var nam = $this.data('categoryName');
        selectedDivs = selectedDivs.filter('[data-category-type="'+cat+'"], [data-category-name="'+nam+'"]');
    }

});
selectedDivs.show();