Dynamisches Zuweisen von Jquery Events

T

tipster

Grünschnabel
Hi!

Wie im Titel beschrieben hab ich ein Problem bzgl des dynamischen Zuweisen von JQuery Events. Vereinfacht dargestellt sieht das so aus.

HTML: 
<ul>
   <li id="li-div-1">Erster Divider</li>
   <li class="li-msg-1">Message im ersten Divider</li>
   <li class="li-msg-1">Message im ersten Divider</li>
   <li id="li-div-2">Zweiter Divider</li>
   <li class="li-msg-2">Message im zweiten Divider</li>
   <li class="li-msg-2">Message im zweiten Divider</li>
</ul>

Ich habe also zwei Listenelemente mit der id li-div-[iterator] versehen. Beim Klick auf li-div-1 zb sollten die Listenelemente mit der Klasse li-msg-1 getoggelt werden. Der jQuery Code dazu:

Code: 
for(var i = 1; i < 3; i++) {
   $( 'li#li-div-' + i ).click( function() {$ ('.li-msg-' + i).slideToggle("slow")});			
}

Mein Problem ist jetzt, dass bei einem click Event die oben gezeigte Funktion zwar aufgerufen wird, allerdings wird der jQuery mit li-msg-3 ausgeführt (i-Wert nach beenden der for-Schleife).

Resultat nach for Schleife und Aufruf von click:
$( 'li#li-div-1).click( function() {$ ('.li-msg-3').slideToggle("slow")});
$( 'li#li-div-2).click( function() {$ ('.li-msg-3').slideToggle("slow")});

Meine Frage, wie kann ich so etwas dynamisch in einer for-Schleife realisieren, dass ich zu dem Resultat
$( 'li#li-div-1).click( function() {$ ('.li-msg-1').slideToggle("slow")});
$( 'li#li-div-2).click( function() {$ ('.li-msg-2').slideToggle("slow")});
komme?

Danke im Voraus!

lg Tipster
 
Mit deinem jetzigen Markup z.B. so

Javascript: 
$('ul').on('click', '[id^=li-div-]', function() {
    $('.li-msg-' + this.id.substr(7)).slideToggle("slow");
});


Aber wenn ich das vom Aufbau her richtig verstehe, dann kannst du dir die ganzen Klassen und IDs sparen.

HTML: 
<ul>
    <li class="divider">Erster Divider</li>
    <li>Message im ersten Divider</li>
    <li>Message im ersten Divider</li>
    <li class="divider">Zweiter Divider</li>
    <li>Message im zweiten Divider</li>
    <li>Message im zweiten Divider</li>
</ul>


Javascript: 
$(document).on('click', '.divider', function() {
    $(this).nextUntil('.divider').slideToggle('slow');
});

http://jsbin.com/aqukal/1


Edit: Um noch deine eigentliche Frage zu kläre:

Javascript: 
for(var i = 1; i < 3; i++) {
    (function(i) {
         $( 'li#li-div-' + i ).click( function() {$ ('.li-msg-' + i).slideToggle("slow")});           
    }(i));
}
 
Super vielen Dank!! Dürft ich noch erfahren warum das JavaScript Codebsp mit der selbstausführenden Funktion dann schlussendlich funktioniert und bei normalem Aufruf stehts die iterator Variable nach beenden der for Schleife verwendet wird?
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück