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/