0

フィルタリング可能なセクションを作成しようとして、オンライン ポートフォリオに取り組んできました。基本的に、私は次の結果を得ようとしています：

フィルターセクションのタグをクリックすると、適切な作品が表示され、残りは非表示になります

どうすればこれを達成できるかわかりません。また、jQueru プラグインを使用したくありません。コードの最後の 2 行は問題なく動作しますが、どこかで問題があります。

$('.filters li').click(function() {

    if ($(this).attr('id') == '#all') {
    $('#works ul li').animate({
        opacity : '0'
    });
    }
    else {
        $(this).trigger('show');
        $(this).trigger('hide');
    }


    $('.filters li').removeClass('current');
    $(this).addClass('current');
});

HTMLコードは次のとおりです。

<ul class="filters">
<li id="all">Tous</li>
<li id="webdesign">Web Design</li>


<section id="works">
<ul>
    <li class="webdesign">
    <span class="details">
        <h4>title</h4>
        <p>skills</p>
    </span>
    <img src="http://placekitten.com/365/240" alt="">
    </li>
    <li class="wordpress">
    <span class="details">
        <h4>title</h4>
        <p>skills</p>
    </span>
    <img src="http://placekitten.com/365/240" alt="">
    </li>
</ul>
</section>
4

1 に答える 1

1

まず、変数を宣言し、セレクターを両方の要素にキャッシュします。

var filtr = $("#filters"), 
    works = $("#works li"), 
    curnt = "current",
    clsID = "";

次に、イベント委任をセットアップします。つまり、1 つのイベントのみをバインドしますが、バブリングの動作を利用して、ネストされたli要素をクリックして開始されたイベントをリッスンします。

filtr.on("click", "li", applyFilter);

最後に、ハンドラーの動作を宣言します。この場合、idクリックされたリスト項目 (ID が存在しない場合は「すべて」) をキャプチャし、それを使用して#works要素内のリスト項目をフィルタリングします。

function applyFilter () {
    clsID = this.id || "all";
    clsID === "all"
        ? works.removeClass(curnt).show()
        : works.not("." + clsID).removeClass(curnt).hide()
               .siblings().addClass(curnt).show();
}​​

フィドル: http://jsfiddle.net/mrU4Y/10/

于 2012-12-18T14:07:08.480 に答える