jQuery: Définir le clic depuis la boucle du tableau

Question

J'ai une série de divs dans un motif d'en-tête/corps, où un clic sur l'en-tête montrera le corps en question.

Tout cela se passe avec .cliquez initialisé à la page ... prêt

Plutôt que de le faire (ce qui fonctionne très bien, mais est une douleur):

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

Je suis en train de le faire:

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

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

Le problème que j'ai est que tous semblent être initialisés au dernier. IE: Si pop3 est le dernier, un clic sur #show_fold_ [any] alertera '# show_fold_pop3'.

Cela semble être très simple. Suis-je en train de manquer quelque chose d'évident, ou y a-t-il un problème avec la transmission d'une chaîne à jQuery que je ne connais pas?

Edit:

Hey, ce sont tous les grands. J'ai lu un peu sur les fermetures et les fonctions auto-invoquant, et (kindasorta) l'obtenir.

Jusqu'ici, j'ai ceci, mais le clic ne semble pas être lié correctement. Area alertera avec la valeur correcte, mais pas de clic de liaison. Est-ce que j'ai encore des problèmes de portée avec Area ou est-ce que je suis tout à fait hors sujet?

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

Oui, j'ai trop souvent rencontré ce problème. Area est une variable globale car elle n'a pas auparavant var. En outre, n'utilisez pas de construction for ... in.

Mais vous pourriez toujours rencontrer un problème similaire. Dieu sait combien de scripts j'ai débugués à cause d'un bug similaire. Faire la bonne portée des garanties suivantes:

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

Vérifiez la portée de votre variable "Zone". Vous assignez une variable globale à la dernière itération. La "Zone" est délimitée en dehors de la boucle.

Answer 3

C'est une chose JavaScript; Ce n'est pas lié à jQuery. Ce que vous faites est de créer une fermeture, mais vous ne comprenez pas correctement comment ils fonctionnent.

Vous pouvez lire sur http://blog.morrisjohns.com/javascript_closures_for_dummies, en particulier les exemples 5, 6 et 7.

Answer 4

assurez-vous que vous avez ajouté l'événement click manipulation après le DOM a été chargé vous pouvez inclure ceci sur l'élément de tête :

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

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