✔ Variable in Callback nicht mehr verfügbar

[kuhlmaehn]

Hi,
mir ist bewusst, dass man den folgenden Code auch besser (z.B. mit each()) programmieren kann aber mir geht es um das Prinzip dahinter.

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
</ul>

for(var i = 0; i < 5; i++) {
    var aa = $("ul li").eq(i);
    aa.data("vari", i);
    aa.click(function(ele) {
        alert("Erste: " + i + "   Zweite: " + $(this).data("vari"));
    });
}

Es läuft eine Schleife durch und dieser bindet auf jedes Element einen Klick, der dann den Index ausgibt. Es wird allerdings bei "Erste" immer 5 ausgegeben. Mit data ließe sich das sicherlich umgehen aber mir ist nicht klar, wieso Javascript den Wert der Variable nicht, wie z.B. in C oder so, in die Callback-Funktion reincompiliert. Mir scheint es, als wird erst beim Ausführen der Callback nach dem Wert geschaut und dieser ist dann nunmal für alle 5.
Wie ließe sich das denn, ohne die Daten an das Objek, was das Event ausführt zu binden, lösen?
Mir ist wie gesagt auch nicht klar, warum das nicht auch so funktioniert
Danke!

 

[ComFreek]

i wird beim jedem Klick neu ausgewertet und der letzte Wert ist eben 5!

Du musst den Code in eine neuen Block packen:

for(var i = 0; i < 5; i++) {
    var aa = $("ul li").eq(i);

    (function(index) {
      aa.click(function(ele) {
          alert("Erste: " + index);
      });
    })(i);
}

 

[CPoly]

ComFreek hat völlig recht. Das liegt daran, dass dein Code in Wirklichkeit so interpretiert wird

var i;
var aa;

for(i = 0; i < 5; i++) {
    aa = $("ul li").eq(i);
    aa.data("vari", i);
    aa.click(function(ele) {
        alert("Erste: " + i + "   Zweite: " + $(this).data("vari"));
    });
}

Denn es gibt keine Block-Level Variablen. Die nächste Version von JavaScript wird dafür dann neben var noch let bieten, um Block-Level Variablen zu erzeugen.

 

[kuhlmaehn]

Ah danke euch, das war mir nicht klar