jQuery: Establecer clic desde el bucle de la matriz

Question

Tengo una serie de divs en un patrón de encabezado/cuerpo, donde un clic en el encabezado mostrará el cuerpo en cuestión.

Todo esto ocurre con .click inicializado en la página listo ...

En lugar de hacer esto (que funciona bien, pero es un dolor):

$('#show_fold_ping').click(function(){ ShowArea('#fold_ping') }); 
$('#show_fold_http').click(function(){ ShowArea('#fold_http') }); 
$('#show_fold_smtp').click(function(){ ShowArea('#fold_smtp') }); 
$('#show_fold_pop3').click(function(){ ShowArea('#fold_pop3') }); 
... 

que estoy tratando de hacer esto:

var Areas = ['ping','http', 'smtp', 'pop3']; 

for(var i in Areas){ 
    Area = '#show_fold_'+Areas[i]; 
    $(Area).click(function(){ alert(Area); /* ShowArea(Area); */ }); 
} 

El problema que tengo es que TODOS ellos parecen haberse inicializado en el último. IE: si pop3 es el último, un clic en #show_fold_ [any] alertará '# show_fold_pop3'.

Esto parece que debería ser realmente simple. ¿Me estoy perdiendo algo obvio, o hay un problema con pasar una cadena a jQuery que no conozco?

Editar:

Oye, estos son todos grandes. He leído un poco sobre cierres y funciones autoinvocadas, y (kindasorta) lo entiendo.

Hasta ahora, tengo esto, pero el clic no parece ser vinculante correctamente. El área alertará con el valor correcto, pero sin enlace de clic. ¿Todavía tengo problemas de alcance con Area, o estoy totalmente fuera de lugar?

$(function(){ 

    Areas = ['ping','http', 'smtp', 'pop3', 'imap', 'ftp', 'dns', 'tcp', 'database', 'seo']; 

    for(var i = 0; i < Areas.length; i++){ 
     (function (Area) { 
          alert(Area); 
      $("#show_fold_"+Area).click(function(){ alert('x'); }); 
     })(Areas[i]); 
    } 
}); 

Answer 1

Sí, he encontrado este problema con demasiada frecuencia. Area es una variable global ya que no tiene var antes. Además, no use un para ... en constructo.

Pero es posible que todavía tenga un problema similar. Dios sabe cuántos guiones he depurado debido a un error similar. Haciendo lo siguiente garantías de alcance adecuado:

var Areas = ['ping','http', 'smtp', 'pop3']; 

for(var i = 0; i < Areas.length; i++){ 
    (function(area) { 
    $(area).click(function(){ alert(area); /* ShowArea(area); */ }); 
    })(Areas[i]); 
} 

Answer 2

Compruebe el alcance de su variable "Área". Básicamente se está asignando una variable global, por lo que en la última iteración, el "Área" se ubica fuera del ciclo.

Answer 3

Es una cosa de JavaScript; no está relacionado con jQuery. Lo que estás haciendo es crear un cierre, pero no estás entendiendo correctamente cómo funcionan.

Es posible que desee leer sobre http://blog.morrisjohns.com/javascript_closures_for_dummies, especialmente los ejemplos 5, 6 y 7.

Answer 4

estar seguro de que ha agregado la manipulación después de que el DOM se ha cargado evento click puede incluir este elemento en la cabeza :

var Areas = ['ping','http', 'smtp', 'pop3']; 

$(document).ready(function() { 
    $.each(Areas, function(i, v){ 
     var Area = '#show_fold_' + v; 
     $(Area).click(function() { 
      alert(Area); 
     }); 
    }); 
}