javascript-events примеры - JavaScript-обработчик JavaScript не работает как ожидалось внутри цикла for




событий делегирование (4)

Рабочий ДЕМО

Это классическая проблема с закрытием JavaScript. Ссылка на объект i хранится в закрытии обработчика кликов, а не на фактическом значении i .

Каждый обработчик клика будет ссылаться на один и тот же объект, потому что есть только один объект-счетчик, который содержит 6, чтобы вы получили по шесть на каждый клик.

Обходным путем является обернуть это в анонимную функцию и передать i в качестве аргумента. Примитивы копируются по значению в вызове функций.

for(var i=1; i<6; i++) {
     (function (i) {
        $("#div" + i).click(
            function () { alert(i); }
        );
     })(i);
}

ОБНОВИТЬ

Обновлено DEMO

Или вы можете использовать 'let' вместо var чтобы объявить i . let дает вам новое связывание каждый раз. Его можно использовать только в strict mode ECMAScript 6.

'use strict';

for(let i=1; i<6; i++) {

        $("#div" + i).click(
            function () { alert(i); }
        );
 }

На этот вопрос уже есть ответ:

Я пытаюсь изучить JS и получить проблему.

Я пробовал много вещей и искал, но все напрасно. Следующий фрагмент кода работает не так, как ожидалось. Я должен получить значение i при щелчке, но он всегда возвращает 6. Я вытаскиваю свои волосы., Пожалуйста, помогите.

for (var i = 1; i < 6; i++) {

    console.log(i);

    $("#div" + i).click(
        function() {
            alert(i);
        }
    );
}

jsfiddle


Проблема в том, что, когда вы повторяете цикл, i увеличивается. Он заканчивается значением 6. Когда вы говорите alert(i) вы запрашиваете javascript, чтобы сообщить вам, что значение i находится во время щелчка ссылки , которое к этому моменту равно 6.

Если вы хотите получить содержимое окна, вы можете сделать что-то вроде этого:

for (var i = 1; i < 6; i++) {

    console.log(i);

    $("#div" + i).click(function(e) {
        alert($(this).text());
    });
}

Рабочий пример: http://jsfiddle.net/rmXcF/2/


$("#div" + i).click(
    function() {
        alert(i);
    }
);

Это потому, что он использует значение i как закрытие. i запоминается через закрытие, которое увеличивается на каждом этапе петли.

$("#div" + i).click(function(event) {
    alert($(event.target).attr("id").replace(/div/g, ""));
});

Просто используйте .map() чтобы <ObjectRow> вашу коллекцию и вернуть <ObjectRow> с реквизитами с каждой итерации.

Предполагаемые objects - это массив где-нибудь ...

<tbody>
  { objects.map((obj, index) => <ObjectRow obj={ obj } key={ index }/> ) }
</tbody>






javascript javascript-events event-handling mouseevent