Проблема выбора JQuery

Question

У меня есть куча элементов с такими идентификаторами, как «check1», «check2», «check3» и т. Д. Я хочу прокрутить каждую из них и скрыть их и установить onclick funcion. Вот мой текущий код:

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

Все «# Проверяем» + я + «инфо» элементы скрыты, но скрыть/функциональность дисплея не работает. Когда я попробую это только для одного элемента вроде этого:

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

Это работает.

Любые идеи?

Answer 1

Вы должны использовать замыкание:

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

Но вы можете также использовать контекстный элемент и его свойство:

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