Wie man JavaScript Event Handler dynamisch mit einer Funktion definiert

Question

Ich bin etwas neu in Javascript und ich kann nicht genau herausfinden, was mit meinen Funktionen los ist.

Hintergrund: mein Skript soll Ihnen erlauben, eine Klasse entweder "toggler" oder "getoggelt" einem Element zuzuordnen, damit sie automatisch verknüpft werden. Wenn Sie also den Toggler an-/abwählen, wird das Toggle ein- und ausgeblendet sind viele Bibliotheken, die das können, aber leider kann ich sie in diesem Fall nicht verwenden)

Das Skript wird beim Pagenload ausgeführt und durchsucht die Elemente nach Einsen mit der Klasse "toggler" und weist dann seinen onclick-Handler entsprechend zu. Hier ist das Stück Code, ich habe Probleme mit:

function makeToggle() { 
    for (i=0;i<toggler.length;i++) { 
     toggler[i].onclick=function(){toggleSection(this,i)}; 
    } 
    } 

    function toggleSection(obj,index) { 
    if (obj.checked==true) { 
     toggled[index].style.display="inline-block"; 
    } else { 
     toggled[index].style.display="none"; 
    } 
    } 

„Die“ übergibt richtig und löst, was auch immer Checkbox, es anzuwenden, aber „Index“ ist immer auf die Länge des toggler Array statt inkrementiert werden. Zum Beispiel können die ersten und zweiten automatischen Umschalten der sollte Onclick sein:

onclick="toggleSection(this,0)" 
onclick="toggleSection(this,1)" 

Was sie tatsächlich eingestellt, für den (vorausgesetzt, ich habe 5 Elemente als toggler definiert):

onclick="toggleSection(this,5)" 
onclick="toggleSection(this,5)" 

Von dem, was ich ich denke, es ist ein Scoping-Problem, oder die Art und Weise gelesen habe ich die Funktion bin aufrufen, aber nichts, was ich gefunden habe, macht viel Sinn

Answer 1

Sie sind Sehen Sie das Problem in this blog post.

Der Grund dafür ist ziemlich kompliziert. Die anonymen Funktionen, die wir als Event-Handler definieren, "erben" die Variable i aus dem Bereich attachEventsToListItems und nicht die for-Schleife. Zu dem Zeitpunkt, zu dem die Ereignisbehandlungsroutinen ausgeführt werden, hat die for-Schleife ihre Iterationen abgeschlossen und der Wert von i in dieser Funktion ist 4. Das Problem hierbei ist, dass die Funktionen, die wir als Ereignisbehandlungsroutinen definieren, keinen neuen Bereich erstellen für i bis sie ausgeführt werden.

Um das Problem zu beheben, müssen Sie einen Verschluss: Alle http://jsfiddle.net/Vb2t2/

Answer 2

Sie nicht, dass variable i so verwenden können, während Sie eine Funktion erstellen . Wenn Sie dies tun, wird der Wert i der letzte Wert von i sein. In Ihrem Problem i wird Länge des Umschalters immer sein.

so sollten Sie Variable (i) als Paramater auf Ihre Onclick-Funktion übergeben,

wie diese versuchen,

function makeToggle() { 
    for (i=0;i<toggler.length;i++) { 
     toggler[i].addEventListener("click", (function(d) { return function(){ 
        toggleSection(this,d); 
     }; })(i), true); 
    } 
} 

oder in Ihrem Stil,

function makeToggle() { 
    for (i=0;i<toggler.length;i++) { 
     toggler[i].onclick = (function(d) { return function(){toggleSection(this,d)}})(i); 
    } 
}