jQuery Onclick Filter仅适用于第一个项目

Question

我正在尝试为我的列表制作一个过滤器，并且它按照我的意愿工作。但它只适用于第一个过滤器，而不适用于其他过滤器。我无法弄清楚为什么。

我想要实现的是，点击'父'过滤器会隐藏'childList'列表项，它们与选定的父项没有相同的'gid'属性。

我的代码如下：

HTML

<ul> 
    <li class="parent" gid="2">2</li> 
    <li class="parent" gid="3">3</li> 
    <li class="parent" gid="4">4</li> 
</ul> 

<ul> 
    <li class="childList" gid="2">2.1</li> 
    <li class="childList" gid="2">2.2</li> 
    <li class="childList" gid="2">2.3</li> 
    <li class="childList" gid="3">3.1</li> 
    <li class="childList" gid="3">3.2</li> 
    <li class="childList" gid="3">3.3</li> 
    <li class="childList" gid="4">4.1</li> 
</ul> 

CSS

li { 
    display: inline-block; 
    padding: 20px; 
    border: 1px solid black; 
    cursor: pointer; 
} 

.selected { 
    background-color: green; 
} 

的Javascript

$(function() { 
    $('.parent').on('click', function() { 
    $(this).select().toggleClass('selected') 

    var gid = $(this).select().attr('gid') 
    if ($(this).select().attr('class') == 'parent') 
     $('.childList').show() 
    else { 
     console.log(gid) 
     if ($('.childList').attr('gid') == gid) 
     $('.childList').not('[gid="' + gid + '"]').hide() 
    } 
    }) 
}) 

您的意见和帮助将不胜感激。谢谢。

Answer 1

的代码，因为你说的“过滤器”我认为它应该像这样工作：当应用没有过滤器，显示整个组子项。

要机智：

$(function() { 
 
    $('.parent').on('click', function() { 
 
    $(this).toggleClass('selected'); 
 

 
    // reset view 
 
    $(".childList").show(); 
 

 
    // apply filter 
 
    var selectedGids = $(".parent.selected").toArray().map(function(o) { 
 
     return $(o).attr("gid"); 
 
    }); 
 
    if(selectedGids.length) 
 
     $(".childList").filter(function() { 
 
     var gid = $(this).attr("gid"); 
 
     return $.inArray(gid, selectedGids) == -1; 
 
    }).hide(); 
 
    }) 
 
})

li { 
 
    display: inline-block; 
 
    padding: 20px; 
 
    border: 1px solid black; 
 
    cursor: pointer; 
 
} 
 
.selected { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="parent" gid="2">2</li> 
 
    <li class="parent" gid="3">3</li> 
 
    <li class="parent" gid="4">4</li> 
 
</ul> 
 
<ul> 
 
    <li class="childList" gid="2">2.1</li> 
 
    <li class="childList" gid="2">2.2</li> 
 
    <li class="childList" gid="2">2.3</li> 
 
    <li class="childList" gid="3">3.1</li> 
 
    <li class="childList" gid="3">3.2</li> 
 
    <li class="childList" gid="3">3.3</li> 
 
    <li class="childList" gid="4">4.1</li> 
 
</ul>

Answer 2

检查以下

$('.childList').hide(); 
 

 
$(function() { 
 
    $('.parent').on('click', function() { 
 
    $(this).select().toggleClass('selected') 
 

 
    var gid = $(this).attr('gid'); 
 
    
 
    $('.childList[gid="'+gid+'"]').toggle(200); 
 
    }); 
 
});

li { 
 
    display: inline-block; 
 
    padding: 20px; 
 
    border: 1px solid black; 
 
    cursor: pointer; 
 
} 
 

 
.selected { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="parent" gid="2">2</li> 
 
    <li class="parent" gid="3">3</li> 
 
    <li class="parent" gid="4">4</li> 
 
</ul> 
 

 
<ul> 
 
    <li class="childList" gid="2">2.1</li> 
 
    <li class="childList" gid="2">2.2</li> 
 
    <li class="childList" gid="2">2.3</li> 
 
    <li class="childList" gid="3">3.1</li> 
 
    <li class="childList" gid="3">3.2</li> 
 
    <li class="childList" gid="3">3.3</li> 
 
    <li class="childList" gid="4">4.1</li> 
 
</ul>

Answer 3

我所使用的函数childreen（）来循环UL的所有childreen。为了达到这个目的，我还在ul中添加了一个类。在这个例子中，我只是做了，如果显示当前选择的父母的childreen。但是，如果你选择了两个父母，那么如果你想修改它，只需更改“if”句子就不会显示任何内容。至少在.childreen（）函数中，你可以让每个孩子都在一个数组中，所以我认为更容易决定做什么。

<ul class="childGid"> 

和JavaScript

 var listChildreen = $("ul.childGid").children() 

    for(var i = 0; i< listChildreen.length; i++) { 
    console.log($(listChildreen[i]).attr('gid')); 
     if ($(listChildreen[i]).attr('gid') != gid) 
      $(listChildreen[i]).hide() 
     } 

所有代码：https://jsfiddle.net/x4zx2y37/2/