0

我有一个小图片库，里面有一堆不同类型的图片。

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

这是它的 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 新手，我不确定应该如何处理。

谢谢

4

2 回答 2

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

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

$('#category_type2').click(function() {
  $('.class2').show();
  $('.class1').hide();
});
于 2010-12-11T10:45:37.710 回答
1

您可以使用数据属性非常干净地做到这一点，如下所示：

<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......并显示这些元素。当您想添加另一种类型时，只需在类别下添加一个新链接以及与之匹配的选择器，就可以了。

于 2010-12-11T10:49:51.107 回答