jQuery: définis, cliquez sur à partir de la matrice de boucle

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

Tout cela se fait avec .cliquez sur initialisé sur la page prêt...

Plutôt que de faire cela (qui fonctionne très bien, mais c'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, je vais avoir, c'est que TOUS d'entre eux semblent être initialisé à la dernière. C'est à dire: Si pop3 est le dernier, un clic sur #show_fold_[tout] alerte '#show_fold_pop3'.

Cela semble comme il devrait être très simple. Ai-je raté quelque chose d'évident, ou est-il un problème avec le passage d'une chaîne à jQuery que je ne le sais pas?

Edit:

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

Jusqu'à présent, j'ai ceci, mais le clic ne semble pas être de liaison correctement. Zone d'alerte avec la valeur correcte, mais pas de cliquez sur lier. Suis-je encore avoir des questions de portée de la Zone, ou suis-je complètement à côté marque?

$(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]);
    }
});
Ne devrait pas $("#fold_"+Région).cliquez sur (...) $("#show_fold_"+Région).cliquez sur(...)?
Oui! Merci, c'est tout. Tellement concentré sur la syntaxe, je suis allé sémantiquement aveugle =o)

OriginalL'auteur Eli | 2009-01-30

  1. 12

    Oui, j'ai rencontré ce problème trop souvent. Area est une variable globale puisqu'il n'est pas var avant. Aussi, n'utilisez pas pour...à construire.

    Mais vous pouvez toujours un problème similaire. Dieu sait combien de scripts que j'ai débogué à cause d'un bug similaire. Procédant de la manière suivante garantit la bonne portée:

    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]);
}

    OriginalL'auteur geowa4

  2. 3

    C'est un JavaScript chose; ce n'est pas jQuery liés. Ce que vous faites est de créer une fermeture, mais vous n'êtes pas comprendre correctement comment ils fonctionnent.

    Vous voudrez peut-être lire sur http://blog.morrisjohns.com/javascript_closures_for_dummies, en particulier les Exemples 5, 6, et 7.

    OriginalL'auteur Sophie Alpert

  3. 2

    Vérifier la portée de votre "Zone" à la variable. Vous êtes essentiellement l'affectation d'une variable globale, donc sur la dernière itération de la "Zone" est définie à l'extérieur de la boucle.

    OriginalL'auteur typeoneerror

  4. 1

    assurez-vous que vous avez ajouté l'événement click traitement après le DOM est chargé
    vous pouvez inclure ce 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);
        });
    });
}
    Vous pouvez modifier le script. var dans les Zones et Zone = ... + [i]?

    OriginalL'auteur