동적으로 번호가 매겨진 객체를 바인딩합니까?

Question

1부터 10까지 번호가 매겨진 DOM 개체가 있습니다 (checkbox_1, back_arrow_1, checkbox_2, back_arrow_2). 화살표를 클릭하면, 나는 그것이 BACK_ARROW의이 같은 정도 예를 들어,

back_arrow_1 clicked 
-> $(checkbox_1).click(); 

나는 동적으로 클릭 기능을 결합하고이 같은 이름을 가진 체크 박스 - 객체의 클릭 기능을 수행 할 :

(function(){ 
    for (var ar_num = 1; ar_num < 4; ar_num++){ 
      $("back_arrow_"+ar_num).bind("click", function() {  
      $("checkbox_"+ar_num).click();   
     }); 
    } 

})(); 

console.logging()은 올바른 화살표를 바인딩한다는 것을 보여줍니다. 그러나 화살표 중 하나를 클릭하면 checkbox_4에 대한 클릭 기능이 수행됩니다. 이는 예를 들어 "checkbox_1"대신 "checkbox_1"을 바인딩한다고 가정하기 때문입니다. , 브라우저는 checkbox_ + ar_num 이벤트를 수행하여 for 루프가 ar_num을 남겨둔 번호를 얻습니다.

이 기능을 수행하는 올바른 방법은 무엇입니까?

Answer 1

클릭 기능에서 루프가 끝나면 ar_num 값을 저장하는 클로저를 설정해야합니다. 이것

봐 : jsfiddle

for (var ar_num = 1; ar_num < 4; ar_num++){ 
    (function(num) { 
     $("#back_arrow_"+num).bind("click", function() {  
      $("#checkbox_"+num).click();  
     }); 
    })(ar_num); 
}