jQuery Onclickフィルタのみ最初の項目のみの作業

Question

私のリストのフィルタを作成しようとしていますが、私が望むように動作しています。ただし、最初のフィルタでのみ機能し、残りのフィルタでは機能しません。なぜ私は理解できません。

私が達成しようとしているのは、「親」フィルタをクリックすると、選択された親と同じ「gid」属性を持たない「childList」リストアイテムが隠れるためです。

私のコードは次のとおりです。

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

以下のコードをチェックしてください：何のフィルタが適用されていない場合、子アイテムのセット全体を示しています。私は、関数childreenを使用

$(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

（）ループにULの全てchildreen：ウィットに

。私はulにクラスを追加しました。この例では、現在選択されている親の子画面を表示するかどうかを指定しました。しかし、2つの親を選択した場合は、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/私がまさに必要だ