jQuery隐藏某些类型的列表项

我有一个图像库，里面有很多不同类型的图像

我希望有显示/隐藏不同类型图像的选项，以及显示所有类型图像的选项。最好的方法是什么

这是它的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>

我想用display:block和display:none附加单独的'show'/'hide'类是有意义的，但我不确定该怎么做，因为我是jQuery新手

---

谢谢

您可以使用数据属性非常干净地完成此操作，如下所示：

<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下添加一个新链接以及与之匹配的选择器，就可以了。

我很确定他想用这个类名隐藏：）@Nick-是的，我扫描时只看到了“class1:|我真的不明白为什么你的标记语法高亮显示被关闭了，这很烦人：）

<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
});