Gibt es ein jquery plugin um divs basierend auf ihrer Klasse (Kategorie) anzuzeigen/zu verstecken klicken

Question

Ich arbeite mit einem Raster kleiner divs welche eine von vier Klassen haben und ich möchte Klassen ein- und ausblenden können Verwenden eines Onclick-Ereignisses. Zum Beispiel wenn es 10 divs gibt und drei als "class1" kategorisiert werden; Wenn Sie auf einen Link in einem Menü klicken, werden die Divis der Klasse 1 ausgeblendet oder nicht sichtbar angezeigt. In ähnlicher Weise würden die anderen Links den gleichen Effekt für "class2" oder "class3" usw. auslösen. Außerdem muss es einen Weg geben, sie alle zurück zu bringen. Wenn jemand eine Idee von etwas da draußen hat, das das schon tut, würde ich einen Schub in diese Richtung schätzen.

Answer 1

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

Siehe the jQuery documentation für weitere Details. Mit fadeIn() können Sie sie zurückbringen.

Answer 2

jquery tut dies bereits:

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

Answer 3

Sehr leicht mit toggle getan:

<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

Das ist die Herzen von jQuery ist:

$(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... 
}); 

Das Markup aussehen würde! Sie wollen etwas wie folgt aus:

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

Um die Lösung sauberer zu machen, empfehle ich geben alle die div s eine gemeinsame Klasse, wie common-class zusätzlich zu class1. So könnten Sie haben:

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

So können Sie etwas so einfach wie schreiben:

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

und alle wiederherzustellen:

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