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 に答える