Was unterscheidet die folgenden jquery-Loops?

Question

Der folgende Code funktioniert wie erwartet. Es erhöht die .heads div Breite, wenn #yy Knopf schlagen und nimmt es, wenn #zz drücken:

var q = ["#zz", "#yy"]; 
var c; 
$.each(q, function(key, value) 
{ 
    $(document).on('click', value, function() 
    { 
     c = (key == 0 ? -20 : 20); 
     $('.heads').css("width", $('.heads').width()+c); 
    }); 
}); 

Allerdings, wenn ich den Code an die unter einem ändern, wird es in beiden Fällen die Breite der erhöhen. Köpfe div:

var q = ["#zz", "#yy"]; 
var c; 
$.each(q, function(key, value) 
{ 
    c = (key == 0 ? -20 : 20); 
    $(document).on('click', value, function() 
    { 
     $('.heads').css("width", $('.heads').width()+c); 
    }); 
}); 

Die Frage ist: warum? Die $ .each-Schleife läuft in beiden Fällen zweimal und c ist -20 in der ersten Iteration und +20 in der zweiten. Aber wenn ich console.log (c) in der .on-Funktion sehe, sieht es aus wie +20 in beiden Fällen im letzten Codeblock und (wie erwartet entweder -20 oder +20 im ersten Codeblock.

Answer 1

Die Funktion zugeordnet onclick Ereignis Schließung. Wenn solche Funktionen in der Schleife erstellt werden, werden sie nach wie vor die gleiche Umgebung teilen. Ihre c Variable außerhalb der $.each() Schleife deklariert wird, deshalb sein Wert in Ihrem zweiten Beispiel ist immer gleich.

Hier ist die vollständige Erklärung: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#Creating_closures_in_loops_A_common_mistake