jQuery: Setzen Sie klicken von Array-Schleife

Question

Ich habe eine Reihe von divs in einem Muster von Header/Körper, wo ein Klick auf den Header zeigt den Körper in Frage.

Dies alles mit .click auf Seite bereit ...

Anstatt dies zu tun initialisiert geschieht (das funktioniert gut, aber es ist ein Schmerz):

$('#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') }); 
... 

ich, dies zu tun versuchen:

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

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

Das Problem, das ich habe, ist, dass alle von ihnen scheinen, um die letzte initialisiert werden. IE: Wenn pop3 der letzte ist, wird ein Klick auf #show_fold_ [any] '# show_fold_pop3' angezeigt.

Dies scheint wie es sollte wirklich einfach sein. Fehle ich etwas Offensichtliches oder gibt es ein Problem mit der Übergabe einer Zeichenfolge an jQuery, von der ich nichts weiß?

Edit:

Hey, das sind alle großartig. Ich habe etwas über Schließungen und selbstaufrufende Funktionen gelesen und (irgendwie) verstanden.

Bis jetzt habe ich das, aber der Klick scheint nicht verbindlich zu sein. Der Bereich wird mit dem richtigen Wert alarmiert, aber keine Klickbindung. Habe ich noch Probleme mit Area, oder bin ich einfach total daneben?

$(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

Ja, ich bin zu oft auf dieses Problem gestoßen. Area ist eine globale Variable, da var davor nicht vorhanden ist. Verwenden Sie auch kein for ... in construct.

Aber Sie könnten immer noch auf ein ähnliches Problem stoßen. Gott weiß, wie viele Skripte ich wegen eines ähnlichen Fehlers ausgetestet habe. Dadurch könnte die folgende Garantien richtige Scoping:

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

Überprüfen Sie den Umfang Ihrer Variablen "Area". Sie ordnen im Grunde eine globale Variable zu, so dass "Area" außerhalb der Schleife auf die letzte Iteration beschränkt ist.

Answer 3

Es ist eine JavaScript-Sache; Es ist nicht jQuery bezogen. Was Sie tun, ist eine Schließung, aber Sie verstehen nicht richtig, wie sie arbeiten.

Sie könnten auf http://blog.morrisjohns.com/javascript_closures_for_dummies lesen wollen, vor allem Beispielen 5, 6 und 7.

Answer 4

sicher sein, dass Sie die Click-Ereignisbehandlung hinzugefügt, nachdem das DOM geladen wurde können Sie hierfür sind auf dem Kopfelement :

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

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