クリックするとそのクラス（カテゴリ）に基づいてdivを表示/非表示するjqueryプラグインがあります

Question

4つのクラスの1つを持つ小さなdivのグリッドで作業しています。クラスをフェードイン/ onclickイベントを使用します。たとえば、10個のdivがあり、3個が「class1」に分類されているとします。メニュー内のリンクをクリックすると、class1 divは完全に隠れているか、ほとんど見えなくなります。同様に、他のリンクは "class2"や "class3"などに対して同じ効果を引き起こします。また、それらをすべて戻す方法が必要です。もし誰かがそこに何かのアイデアを持っているのであれば、これはすでに私がその方向に押しつけることに感謝します。

Answer 1

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

詳細はthe jQuery documentationを参照してください。 fadeIn（）を使用すると、emを戻すことができます。

Answer 2

jqueryのは、すでにこれを行います。

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

Answer 3

が非常に簡単に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... 
}); 

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

のjQueryの中心部である

<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 4

！あなたはこのような何かをしたい：

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

が解決クリーナーを作るために、私はclass1に加えcommon-classのように、divはね、共通のクラスをすべてを与えることをお勧めします。だから、可能性があります：

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

をこれはあなたのような単純なもの書くようになる：

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

をそして、すべてを復元する：

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