Динамически связывать пронумерованные объекты?

Question

У меня есть DOM-объекты, которые пронумерованы от 1 до 10 следующим образом: checkbox_1, back_arrow_1, checkbox_2, back_arrow_2. Когда стрелка нажата, я хочу, чтобы она выполняла функцию щелчка для объекта-флажка с тем же именем, например

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

Я динамически связываю функции click для back_arrow'ов так:

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