Problème de sélection Jquery

Question

J'ai un tas d'éléments avec des identifiants comme "check1", "check2", "check3", etc. Je veux faire une boucle sur chacun d'entre eux et les cacher et régler la fonction onclick. Voici mon code actuel:

for (i = 0; i < badgeArray.length; i++) { 
     jQuery("a#check"+ i + "").click(function(){ 
      jQuery("#check" + i + "info").toggle(); 
      jQuery("a#check"+ i + "").toggleClass("extrasopen"); 
      jQuery("a#check"+ i + "").toggleClass("extrasclosed"); 
     }); 
     jQuery("#check" + i + "info").hide(); 
    } 

Toutes "#check" + i + éléments "info" sont cachés, mais cacher/fonctionnalité d'affichage ne fonctionne pas. Lorsque je l'essaie juste pour un élément comme celui-ci:

jQuery("a#check1").click(function(){ 
    jQuery("#check1info").toggle(); 
    jQuery("a#check1").toggleClass("extrasopen"); 
    jQuery("a#check1").toggleClass("extrasclosed"); 
}); 

Cela fonctionne.

Des idées?

Answer 1

Vous devez utiliser une fermeture:

for (var i = 0; i < badgeArray.length; i++) { 
    (function(i) { 
     jQuery("a#check"+ i).click(function(){ 
      jQuery("#check" + i + "info").toggle(); 
      jQuery("a#check"+ i).toggleClass("extrasopen").toggleClass("extrasclosed"); 
     }); 
     jQuery("#check" + i + "info").hide(); 
    })(i); 
} 

Mais vous pouvez aussi utiliser l'élément contextuel et ses propriétés:

for (var i = 0; i < badgeArray.length; i++) { 
    jQuery("a#check"+ i).click(function(){ 
     jQuery("#" + this.id + "info").toggle(); 
     jQuery(this).toggleClass("extrasopen").toggleClass("extrasclosed"); 
    }); 
    jQuery("#check" + i + "info").hide(); 
}