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>

我认为用display：block和display：none来附加单独的'show'/'hide'类是有意义的，但不知道我应该如何解决这个问题，因为我是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属性中的选择器匹配的元素...并显示这些元素。如果您想添加其他类型，只需在类别下添加新链接，并在其中添加匹配选择器，即可完成设置。

jQuery隐藏某些类型的列表项

2 个答案: