Wie jQuery hinzufügen/verbergen Funktion innerhalb Forloop hinzufügen?

Question

Ich möchte ein jQuery zeigen/verbergen Funktion auf meiner Website. Die usual show/hide-Funktion funktioniert, aber meine ist etwas komplexer als die übliche.

Das "hide div" und das div, das ich verstecken/anzeigen möchte, befinden sich in einer for-Schleife und es gibt Unmengen von divs mit diesen Namen. Ich kann spezifische IDs für jedes Div hinzufügen (programmgesteuert), aber ich konnte diesen Namen nicht innerhalb von JavaScript programmatisch hinzufügen: Ich muss sie manuell hinzufügen.

Dies ist das Stück Code ich die Funktion hinzufügen möchten:

{% for facet in facets %} 
    <div class="block-title"> {{ facet.name }} <div id="hide">HIDE</div></div> 
     <ul class="term-list"> 
      {% for stat in stats %} 
       <li class="term-item>{{ stat.name }}</li> 
      {% endfor %} 
     </ul> 
{% endfor %} 

Und das ist die Show/Hide-Funktion:

<script> 
$(document).ready(function(){ 
    $("#hide").click(function(){ 
     $(".term-list").hide(); 
    }); 
    $("#show").click(function(){ 
     $(".term-list").show(); 
    }); 
}); 
</script> 

Als ich Klicken Sie auf den Verbergen-Knopf, es verbirgt alle .term-list divs wie erwartet.

habe ich versucht, zwei Methoden, aber nicht erfolgreich sein könnte:

1. ich eine Nummer zu #hide und .term-list divs (mit forloop) hinzugefügt, es wird: #hide1 und .term-list1, #hide2 und .term-list2, .. Aber ich konnte dem JavaScript-Code keine funktionierende for-Schleife hinzufügen.
2. Ich habe versucht, nur die folgenden (nächsten) .term-list div wenn Klick auf #hide aber die next() und nextAll()functions funktionierte nicht zu verstecken.

Also, was soll ich tun jQuery Show/Hide-Funktion innerhalb dieser for-Schleife hinzufügen?

Answer 1

Sie können IDs auf einer Seite nicht wiederholen, sie sind per Definition eindeutig. Verwenden Sie Klassen statt

Dann mit einem Verfahrweg zugeordnet Liste Objekt

$(".hide").click(function(){ 
    // "this" is element event occurred on 
    $(this).closest('.block-title').next().hide(); 
}); 

Answer 2

Verwenden Sie einfach $(this) jQuery zu lokalisieren Element auszuwählen auszublenden oder zeigen (und Sie müssen id-Attribut hide Klasse ändern, weil Sie sollten nur ein Element mit einer ID auf der Webseite haben).

Nach Änderung id attributte Klasse:

var elTerms = null; 
$('.hide').click(function(){ 
    elTerms = $(this).closest('div').find('ul.term-list'); 
    if (elTerms.is(':visible')) { 
    elTerms.hide(); 
    } else { 
    elTerms.show(); 
    }; 
});