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属性中的选择器匹配并显示这些属性的属性。当你想添加另一种类型时，只需在类别下添加一个新链接，并在其中添加匹配的选择器，然后全部设置好。