jquery - クリック時にクラス（カテゴリ）に基づいてdivを表示/非表示にするjqueryプラグインはありますか

Question

4 つのクラスのうちの 1 つを持つ小さな div のグリッドを使用しています。onclick イベントを使用してクラスをフェードインおよびフェードアウトできるようにしたいと考えています。たとえば、10 個の div があり、3 個が「class1」に分類されているとします。メニュー内のリンクをクリックすると、class1 の div が完全に非表示になるか、ほとんど表示されなくなります。同様に、他のリンクは「class2」または「class3」などに対して同じ効果を引き起こします。また、それらをすべて元に戻す方法が必要です。誰かがすでにこれを行う何かのアイデアを持っているなら、私はその方向に突き進んでいただければ幸いです.

Answer 1

toggleで非常に簡単に実行できます:

$(document).ready(function() {
    $('#IDOfLink').click(function() {
        $('.class1').toggle("slow");//switch to show/hide when clicked
    });

    $('#anotherLinkID').click(function() {
        $('.class2').toggle("fast");//switch to show/hide when clicked
    });
    //...etc...
});

マークアップは次のようになります。

<a id="IDofLink">Click here to toggle divs with the class of class1</a>

<div class="class1">Blah blah</div>
<div class="class1">Another class1 div</div>

Answer 2

それがjQueryの核心です！次のようなものが必要です。

$("#link-that-will-be-clicked").click(function() {
    $(".class2,.class3,.class4").fadeOut();
});

ソリューションをよりクリーンにするために、に加えて、すべてのdivsa 共通クラスを指定することをお勧めします。だからあなたは持っているかもしれません：common-classclass1

<div class="common-class class1"></div>

これにより、次のような簡単なものを書くことができます。

$("#link-that-will-be-clicked").click(function() {
    $(".common-class:not(.class1)").fadeOut();
});

そしてすべてを復元するには：

$(".common-class").fadeIn();

Answer 3

jqueryはすでにこれを行っています：

$(".class1").fadeOut("slow");
$(".class1").fadeIn("slow");

Answer 4

$(".class1").fadeOut();

詳細については、jQuery のドキュメントを参照してください。fadeIn() を使えば em を元に戻すことができます。