javascript - 按复选框显示/隐藏 div 链接 jquery 过滤

Question

当我添加 <a href="#"></a> 时，我有我的 jquery 复选框过滤器，它通过显示/隐藏 div 来工作。复选框不再显示/隐藏 div

div 中的 2 个是用于演示的链接，另外 2 个故意不是链接以显示它们有效。

问题是需要将什么添加到 jquery 中才能使复选框在 div 位于 <a href> 中时作用于它们？

我试过了 var selectedDivs = $('#Categories > .linkkk > div').hide();但这似乎不起作用

https://jsfiddle.net/f7srx0dd/22/

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



</div>

<div id="Categories">
    <a href="#" class="linkkk"><div class="hide" data-category-type="high" data-category-name="pizza">high</div></a>
    <a href="#"><div class="hide" data-category-type="low" data-category-name="pasta">low</div></a>
    <div class="hide" data-category-type="low" data-category-name="pizza">low</div>
    <div 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');
}

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

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

}


});

Answer 1

( Demo )

您正在使用 css child selector如果它不是 #Categories 的直接后代，它将找不到 div。这...

var selectedDivs = $('#Categories > div').hide();

应该是这样的吧

var selectedDivs = $('#Categories div').hide();

或者，更具体地说，您可以使用这个...

var selectedDivs = $('#Categories > div, #Categories > a').hide();

或者，如果您想要#Categories 的每个直接后代，您可以使用这个...

var selectedDivs = $('#Categories > *').hide();

或者，如果你想专门隐藏 anchor 内的 div，你可以使用这个...

var selectedDivs = $('#Categories > a > div').hide();