Binding Hörer innerhalb einer for-Schleife: variable Umfang Mißverständnis

Question

Ich habe einen variablen Umfang Problem, und ich verstehe nicht, warum dies der Fall ist und wie man es loswerden:

var items = ['foo', 'bar']; 
    for (var index in items) { 
     var item = items[index]; 
     var selector = '.'+item+'-class'; 
     $(selector).bind('click', function() { 
      console.log("class: "+$(this).attr('class')); 
      console.log("selector: "+selector); 
      console.log("item: "+item); 
     }); 
    } 

der Auffassung, dass dieser Code ausführen sich über das folgende HTML:

<div class="foo-class">Foo</div> 
<div class="bar-class">Bar</div> 

Ein Klick auf „foo“ erinnert an die richtige Klasse (zB „foo-Klasse“) in der ersten Zeile, aber der Wähler und der Einzelteilname bar folgenden beziehen. Ich denke, dass das Problem darin besteht, dass die zweite Iteration der Schleife die Variablen zurücksetzt, die in der ersten verwendet wurden.

Ich dachte, dass die Deklaration innerhalb der Schleife deutlich ihren Geltungsbereich auf dieser Ebene deklarieren sollte. Liege ich falsch ? Warum ? Wie kann ich es reparieren ?

Ich bin nicht auf der Suche nach einem Workaround, ich will etwas sauberes und ein besseres Verständnis von JavaScript Variable Umfang Mecanism.

Hier die jsfiddle.

Danke!

Answer 1

Hier ist Ihr Geige Beispiel aktualisiert.

var items = ['foo', 'bar']; 
for (var index in items) { 
    (function() { 
     var item = items[index]; 
     var selector = '.' + item + '-class'; 
     $(selector).bind('click', function() { 
      console.log("class: " + $(this).attr('class')); 
      console.log("selector: " + selector); 
      console.log("item: " + item); 
     }); 
    })(); 
}​ 

eine anonyme Funktion erstellen einen neuen Rahmen für jede Ihrer definierten Variablen definieren

TIPP: Versuchen Sie, eine eigene Funktion zu erstellen, die binden zu tun, nur den Code sauberer zu halten.

Answer 2

Es ist immer das Gleiche mit diesen For-Loops (google it). JavaScript hat keinen Blockbereich, sondern Funktionsumfang. Wenn also ein Element angeklickt wird, hat die eine Variable selector den Wert, den sie nach dem letzten Schleifenlauf hatte (dasselbe gilt für die Variable item).

Um das Problem zu lösen, benötigen Sie eine weitere Schließung in Ihrer Schleife, die die Variablen in ihrem eigenen Umfang speichert. Das bedeutet, dass Sie für jeden Schleifenlauf eine Funktion ausführen müssen.

Answer 3

Das Problem ist nicht unbedingt Variable Bereich. Die anonyme Funktion wird zu dem Zeitpunkt ausgeführt, an dem das Klickereignis ausgelöst wird, nicht, wenn Sie es in der Schleife definieren. Betrachten Sie die folgende, die funktional identisch mit Ihrem Beispiel ist:

var items = ['foo', 'bar']; 

for (var index in items) { 
    var item = items[index]; 
    var selector = '.'+item+'-class'; 
    $(selector).bind('click', test); 
} 
​ 
function test() { 
    console.log("selector: "+selector); 
} 

Diese (hoffentlich) zeigt, was passiert: die globale Variable selector in der Funktion ist, zu der Zeit die Funktion aufgerufen wird, die in beiden Fällen gleich ("Bar").

Answer 4

var items = ['foo', 'bar']; 
for (var index in items) { 
    (function(i){ 
    var item = items[i]; 
    var selector = '.'+item+'-class'; 
    $(selector).bind('click', function() { 
      console.log("class: "+$(this).attr('class')); 
      console.log("selector: "+selector); 
      console.log("item: "+item); 
     }); 
    })(index); 
} 

Fiddle here.

Answer 5

Vars „Selektor“ und „Position“ sind Bezugnahmen auf einen Ort, an dem Sie Werte speichern, und die Werte von denen zwei zur Zeit eine der htl Elemente klicken ist die eine frome die letzte Schleife.