jQuery dynamisch umschalten

Question

Ich möchte divs dynamisch umschalten. Hier ist, was ich bisher gefunden ...

$(".toggle").click(function() { 
$(this).next('.container').toggle('fast'); 
}); 

Was ich habe, ist dies (HTML):

<h4 class="toggle">1</h4> 
<h4 class="toggle">2</h4> 
<h4 class="toggle">3</h4> 
<div class="container">Content1</div> 
<div class="container">Content2</div> 
<div class="container">Content3</div> 

Als ich das erste Element klicken (h4 mit Klasse Toggle) Ich möchte das erste Element mit Klassencontainer zum Öffnen/Schließen.

Wenn ich auf die zweite toggle-Klasse klicke, sollte sich die zweite container-Klasse öffnen.

Die nächsten in meinem Beispiel funktionieren nicht.

Answer 1

Wenn Sie diese DOM-Struktur behalten möchten/wollen, sollten Sie die index verwenden.

$('.toggle').click(function() { 
    $('.container').eq($(this).index()).toggle('fast'); 
}); 

Ref .: .eq(), .index()

Beispiel: http://www.jsfiddle.net/4yUqL/36/

Answer 2

Sie können die toggle feature of JQuery ausprobieren. Und ich werde eher eine andere Abhängigkeit zwischen den Headern und den Inhalts-Divs haben, anstatt der Reihenfolge ihres Auftretens zu vertrauen.

Answer 3

Ich denke, was Sie suchen ist

$(".toggle").click(function() { 
    $($('.container')[$(this).index(".toggle")]).toggle('fast'); 
}); 

Arbeits fiddle

Answer 4

, wenn Sie die Reihenfolge Ihrer html ändern:

<h4 class="toggle">1</h4> 
<div class="container">Content1</div> 
<h4 class="toggle">2</h4> 
<div class="container">Content2</div> 
<h4 class="toggle">3</h4> 
<div class="container">Content3</div> 

Ihr Code funktioniert, weil es das gerade wird immer nächsten DOM-Element und schaltet es um, wenn es mit der Klasse übereinstimmt. Es ist jedoch ziemlich wackelig und andere Leute sagen, dass js genauer gesagt, was zu tun wäre, besser wäre.