Cierres en un bucle for

Question

Los cierres en un bucle me están causando problemas. Creo que tengo que hacer otra función que devuelva una función para resolver el problema, pero no puedo hacer que funcione con mi código jQuery.

Aquí es el problema básico en una forma simplificada:

function foo(val) { 
    alert(val); 
} 

for (var i = 0; i < 3; i++) { 
    $('#button'+i).click(function(){ 
    foo(i); 
    }); 
} 

Naturalmente clic en cualquiera de los tres botones le dará una alerta diciendo 3. La funcionalidad que quiero es que al hacer clic en el botón 1 dará una alerta diciendo 1, botón 2 dirá 2 etc.

¿Cómo puedo hacer eso?

Answer 1

Consulte el método bind.

$('#button'+i).bind('click', {button: i}, function(event) { 
    foo(event.data.button); 
}); 

A partir de los documentos:

El parámetro opcional es EVENTDATA no se usa comúnmente. Cuando se proporciona, este argumento nos permite pasar información adicional al controlador. Uno a mano uso de este parámetro es trabajar en torno problemas causados ​​por los cierres

Answer 2

Utilice la función each de jQuery - supongo que un bucle a través de elementos similares - por lo que añadir el clic de usar algo como:

$(element).children(class).each(function(i){ 
    $(this).click(function(){ 
     foo(i); 
    }); 
}); 

No probado, pero siempre uso esta estructura amable siempre que sea posible.

Answer 3

O simplemente fabrique una nueva función, como usted describe. Se vería así:

function foo(val) { 
    return function() { 
     alert(val); 
    } 
} 

for (var i = 0; i < 3; i++) { 
    $('#button'+i).click(foo(i)); 
} 

Estoy bastante seguro de que la solución de Mehrdad no funciona. Cuando ve personas copiar en una variable temporal, por lo general, se guarda el valor de "this" que puede ser diferente dentro de un alcance interno para niños.

Answer 4

@La solución de Andy es la más bonita. Pero también puede usar el alcance de Javascript para ayudarlo a ahorrar el valor de su cierre.

Para ello, cree un nuevo ámbito en su cuerpo de ciclo ejecutando una función anónima.

for (var i = 0; i < 3; i++) { 
    (function(){ 
    var index = i; 
    $('#button'+index).click(function(){ 
     foo(index); 
    }); 
    })(); 
} 

Puesto que el cuerpo de bucle es un nuevo ámbito de aplicación en cada iteración, la variable de índice se duplica con el valor correcto en cada iteración.

Answer 5

probar este código:

function foo(val) { 
    alert(val); 
} 

var funMaker = function(k) { 
    return function() { 
    foo(k); 
    }; 
}; 

for (var i = 0; i < 3; i++) { 
    $('#button'+i).click(funMaker(i)); 
} 

Algunos puntos importantes aquí:

• JavaScript es función de ámbito. Si desea un alcance nuevo ('más profundo'), debe crear una función para mantenerlo.
• Esta solución es específica de Javascript, funciona con o sin jQuery.
• La solución funciona porque cada valor de i se copia en un nuevo ámbito de aplicación como k, y la función de regresar de funMaker se cierra alrededor de k (que no cambia en el bucle), no alrededor de i (que lo hace).
• Tu código no funciona porque la función que pasas a click no 'posee' el i, se cierra sobre el i de su creador, y que i cambia en el ciclo.
• El ejemplo podría haberse escrito con funMaker en línea, pero generalmente uso tales funciones de ayuda para aclarar las cosas.
• El argumento de funMaker es k, pero eso no hace ninguna diferencia, podría haber sido i sin ningún problema, ya que existe en el alcance de la función funMaker.
• Uno de la explicación más clara del modelo de evaluación del 'medio ambiente' se encuentra en "Estructura e Interpretación de los programas de ordenador, por Sussman & Abelson (http://mitpress.mit.edu/sicp/ texto completo en línea, no es una lectura fácil) - véase la sección 3.2. Como JavaScript es realmente Scheme con sintaxis C, esa explicación es correcta.

EDIT: Se corrigió algunos signos de puntuación.