javascript - disparar - jQuery: Establecer clic desde el bucle de la matriz

tooltip html

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 sucede con .click inicializado en la página lista ...

En lugar de hacer esto (lo 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'') });
...

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 parecen estar inicializados al último. IE: si pop3 es el último, un clic en #show_fold_ [any] alertará ''# show_fold_pop3''.

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 geniales. 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

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 en http://blog.morrisjohns.com/javascript_closures_for_dummies , especialmente los ejemplos 5, 6 y 7.

Answer 2

Sí, me he encontrado con 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 aún podría encontrarse con un problema similar. Dios sabe cuántos guiones he depurado debido a un error similar. Hacer lo siguiente garantiza el 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 3

Verifique 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 establece fuera del ciclo.

Answer 4

asegúrese de haber agregado el manejo del evento click después de que el DOM haya sido cargado, puede incluir esto en el elemento principal:

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

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