JavaScript Click-Handler funktioniert nicht wie erwartet in einer for-Schleife

Question

Ich versuche JS zu lernen und habe ein Problem.

Ich habe viele Dinge ausprobiert und googelte aber alles umsonst. Das folgende Codeelement funktioniert nicht wie erwartet. Ich sollte einen Wert von i auf einen Klick erhalten, aber es gibt immer 6 zurück. Ich ziehe mir die Haare aus., Bitte hilf mir.

for (var i = 1; i < 6; i++) { 

    console.log(i); 

    $("#div" + i).click(
     function() { 
      alert(i); 
     } 
    ); 
} 

jsfiddle

Answer 1

Working DEMO

Dies ist ein klassisches JavaScript Schließungsproblem. Der Verweis auf das i-Objekt wird im Click-Handler-Abschluss gespeichert und nicht im tatsächlichen Wert i.

Jeder einzelne Klick-Handler verweist auf dasselbe Objekt, weil es nur ein Counter-Objekt gibt, das 6 enthält, so dass Sie bei jedem Klick sechs erhalten.

Die Problemumgehung besteht darin, dies in eine anonyme Funktion einzubinden und I als Argument zu übergeben. Primitive werden in Funktionsaufrufen nach Wert kopiert.

for(var i=1; i<6; i++) { 
    (function (i) { 
     $("#div" + i).click(
      function() { alert(i); } 
     ); 
    })(i); 
} 

UPDATE

Updated DEMO

Oder Sie 'let' statt vari zu erklären, verwenden können. let gibt Ihnen jedes Mal frische Bindung. Es kann nur in ECMAScript 6 strict mode verwendet werden.

'use strict'; 

for(let i=1; i<6; i++) { 

     $("#div" + i).click(
      function() { alert(i); } 
     ); 
} 

Answer 2

$("#div" + i).click(
    function() { 
     alert(i); 
    } 
); 

Es ist, weil sie den Wert von i als Verschluss verwendet wird. i wird durch einen Verschluss erinnert, der in jeder Phase der Fußschleife zunimmt.

$("#div" + i).click(function(event) { 
    alert($(event.target).attr("id").replace(/div/g, "")); 
}); 

Answer 3

Das Problem ist, dass, wie Sie durch die Schleife durchlaufen, i erhöht wird. Es endet mit einem Wert von 6 bis Wenn Sie sagen, alert(i) Sie Javascript bitten, Ihnen zu sagen, was den Wert von izum Zeitpunkt der Link geklickt wird, die von diesem Punkt 6.

ist Wenn Sie möchten, der Inhalt der Box zu bekommen, anstatt Sie so etwas tun könnte:

for (var i = 1; i < 6; i++) { 

    console.log(i); 

    $("#div" + i).click(function(e) { 
     alert($(this).text()); 
    }); 
} 

Arbeitsbeispiel: http://jsfiddle.net/rmXcF/2/