Question

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

div中有2个是演示链接，另外2个是有目的地没有显示它们工作的链接。

问题是需要添加到jquery的内容，以便当复选框位于<a href>内时，复选框可以对其进行操作

我试过了var selectedDivs = $('#Categories > .linkkk > div').hide();，但这似乎没有效果

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

如果div不是#Categories的直接后代，则您使用的css child selector将找不到var selectedDivs = $('#Categories > div').hide();。此...

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

应该是......

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

或者，更具体地说，你可以使用它......

#Categories

或者，如果您想要var selectedDivs = $('#Categories > *').hide();的每个直系后代，您可以使用此...

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

或者，如果你想在锚点中专门隐藏div，你可以使用它......

WITH e AS (
      SELECT employee, ITEM_TYPE, COUNT(ITEM_TYPE) as cnt
      FROM hr_database
      GROUP BY employee, ITEM_TYPE
     )
SELECT (case when cnt is not null then employee end) as employee,
       item_type, cnt
FROM (select employee, item_type, cnt, 1 as x from e union all
      select distinct employee, NULL, NULL, 2 as x from e
     ) e
ORDER BY e.employee, x;

Answer 2

当您使用div选择器a包裹#Categories > div时，{I}}不再有效，因此您无法过滤这些节点。

最简单的解决方案是修复HTML标记：

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

演示： https://jsfiddle.net/f7srx0dd/23/

但是，如果你仍想用div包裹a，那么你可以这样做：

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

并使用#Categories > *选择器：

演示： https://jsfiddle.net/f7srx0dd/26/

Answer 3

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

https://jsfiddle.net/f7srx0dd/30/

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

<div data-category-type="bread" data-category-name="bread">bread</div>

https://jsfiddle.net/f7srx0dd/31/

按复选框显示/隐藏div link jquery

3 个答案: