0

製品を動的に表示する作成中のページの場合、並べ替えの製品フィルターを作成する必要があります。ul#product-filter の li 要素をクリックすると、適切な div (製品カテゴリ) が表示/非表示になります。

私のHTMLコードを見てください：

<ul id="product-filter">
    <li class="cat_1">category 1</li>
    <li class="cat_2">category 2</li>
</ul>

<div id="product-display">
    <div class="cat_1">
        <img src="image1.gif">
    </div>

    <div class="cat_2">
        <img src="image2.gif">
    </div>
</div>

現在、私のjQueryソリューションは次のとおりです。

$('#products-filter li[class^=cat_]').click(function() {
    $('#products-display div[class=' + $(this).attr('class') + ']').fadeToggle();
});

ただし、これは選択されたカテゴリ (製品カテゴリ div) のみをフェードトグルします。クライアントは、最初のカテゴリ (「li」) をクリックすると、他のすべての「製品カテゴリ」の div を非表示にして、選択したものだけを表示するように要求しました。別の (「li」) カテゴリをクリックすると、この 2 番目の製品 div も表示されますが、以前に選択したものが表示されます.. など. この同じ「li」項目を再度クリックすると、カテゴリが再び非表示になります.. など.

「リセット」ボタンも理想的です。

どんな提案でも大歓迎です。

4

1 に答える 1

0

これは、最初のクリックでクリックされたアイテムのみを表示し、その後のクリックでクリックされたアイテムを切り替える（他のアイテムはそのままにする）という「クライアント要求動作」を実装していると思います。

var clickOnce = false;
$('#product-filter li').click(function() {
    if (!clickOnce) {
        $('#product-display > div').hide();
        $('#product-display .' + this.className).show();
        clickOnce = true;
    } else {
        $('#product-display .' + this.className).toggle();
    }
});​

作業デモ： http： //jsfiddle.net/jfriend00/KHeVp/

クリックしたものだけを表示し、他のすべてを非表示にするには（より伝統的な動作）、これを使用できます。

$('#product-filter li').click(function() {
    $('#product-display > div').hide();
    $('#product-display .' + this.className).show();
});​

作業デモ： http： //jsfiddle.net/jfriend00/Tcjam/

またはアニメーション付き：

$('#product-filter li').click(function() {
    $('#product-display > div:visible').slideUp();
    $('#product-display .' + this.className).stop(true).slideDown();
});​

作業デモ： http： //jsfiddle.net/jfriend00/ZThzA/

于 2012-09-11T20:29:03.070 に答える