jQuery隱藏某些類型的列表項

Question

我有一個小圖片庫的東西，拿着一堆不同類型的圖像。

我想要顯示/隱藏不同類型圖像的選項，以及顯示所有類型的選項。什麼是最好的方法來做到這一點？

這是它的HTML。

<div id="categories"> 
    <a id="category_all" href="#all"><img src="all.png" /></a> 
    <a id="category_type1" href="#type1"><img src="type1.png" /></a> 
    <a id="category_type2" href="#type2"><img src="type2.png" /></a> 
</div> 
<div id="list"> 
    <ul class="images"> 
    <li class="class1"><img src="image.jpg"/></li> 
    <li class="class2"><img src="image.jpg"/></li> 
    <li class="class2"><img src="image.jpg"/></li> 
    <li class="class1"><img src="image.jpg"/></li> 
    <li class="class2"><img src="image.jpg"/></li> 
    <li class="class1"><img src="image.jpg"/></li> 
    <li class="class1"><img src="image.jpg"/></li> 
    <li class="class1"><img src="image.jpg"/></li> 
    <li class="class1"><img src="image.jpg"/></li> 
    <li class="class1"><img src="image.jpg"/></li> 
    <li class="class1"><img src="image.jpg"/></li> 
    </ul> 
</div> 

我想這將是有意義的追加獨立「秀」與顯示器/「隱藏」類：塊和顯示：沒有，但不知道我怎麼應該去關於這個問題，我是新來的jQuery。

感謝

Answer 1

$('#category_all').click(function() { 
    $('.class1,.class2').show(); 
}); 

$('#category_type1').click(function() { 
    $('.class1').show(); 
    $('.class2').hide(); 
}); 

$('#category_type2').click(function() { 
    $('.class2').show(); 
    $('.class1').hide(); 
}); 

Answer 2

您可以用數據屬性做到這一點很乾淨，像這樣：

<div id="categories"> 
    <a data-show="*" href="#"><img src="all.png" /></a> 
    <a data-show=".class1" href="#"><img src="type1.png" /></a> 
    <a data-show=".class2" href="#"><img src="type2.png" /></a> 
</div> 

然後使用一個單擊處理程序，例如：

$("#categories a").click(function(e) { 
    $("#list .images li").hide().filter($(this).data("show")).show();  
    e.preventDefault(); //prevent page scrolling to top 
}); 

這是做什麼是點擊它隱藏所有<li>元素，然後使用.filter()與data-show屬性中的選擇器匹配並顯示這些屬性的屬性。當你想添加另一種類型時，只需在類別下添加一個新鏈接，並在其中添加匹配的選擇器，然後全部設置好。