Генерация .click функций внутри цикла for

Question

Внутри цикла for, который перебирает 15 «коробочных» объектов, код ниже:

for (var i = 0; i < boxesLength; i++) {

Я пытаюсь автоматически генерировать эти события щелчка, раньше они были такими: (все времядо 15)

$("#box0").click(function(){
    var rw = 462;
    var input = $('#rw');
    input.val(rw);

    var rh = 310;
    var input = $('#rh');
    input.val(rh);
    calculateRectangle();
    calculateRectangle2();
});

Сейчас я пытаюсь автоматически сгенерировать их в цикле for, выполнив следующее:

$("#box" + i).click(function(){
    var rw = allBoxes[i].width;
    var input = $('#rw');
    input.val(rw);

    var rh = allBoxes[i].length;
    var input = $('#rh');
    input.val(rh);
    calculateRectangle();
    calculateRectangle2();
});

Что я делаю не так?Когда я консоль журнала "#box" + я получаю ожидаемый результат ..

Answer 1

Другое решение будет таким:

$("#box" + i).click(function(i){
return function(){
    var rw = allBoxes[i].width;
    var input = $('#rw');
    input.val(rw);

    var rh = allBoxes[i].length;
    var input = $('#rh');
    input.val(rh);
    calculateRectangle();
    calculateRectangle2();
}}(i));

Answer 2

Это пример closures.Когда вы пытаетесь нажать одну кнопку, ваш алгоритм будет использовать последнее значение переменной i, равное boxesLength.

Чтобы решить эту проблему, просто используйте ключевое слово let.

for (let i = 0; i < boxesLength; i++) {
     ^^^