Вопрос по javascript – Область видимости переменной Javascript внутри цикла

11

Как мне сохранить доступ кi переменная внутри моего для цикла ниже? Я пытаюсь учиться, а не просто получить ответ, поэтому немного пояснений было бы очень полезно. Спасибо!

var el, 
    len = statesPolyStrings.length;

for (var i = 0; i < len; i++) {
    el = document.getElementById(statesPolyStrings[i]);

    google.maps.event.addDomListener(el, 'mouseover', function() {
        $("#"+statesPolyStrings[i]).addClass("highlight");
        statesPolyObjects[i].setOptions({ strokeWeight: '2' });
    });
}
возможный дубликатJavascript closure inside loops - simple practical example Felix Kling
Я хочу получить к нему доступ в функции addDomListener в цикле for. Везде, где вы видите i в приведенном выше коде, я хочу использовать i как определено и увеличено в цикле for. chris_mac
Вы хотите доступ кi вне цикла? У вас уже есть доступ кi внутри для цикла. Hunter McMillen

Ваш Ответ

3   ответа
1
for (var i = 0; i < statesPolyStrings.length; i++) {
    (function(i){
        google.maps.event.addDomListener(document.getElementById(statesPolyStrings[i]), 'mouseover', function() {
        $("#"+statesPolyStrings[i]).addClass("highlight");
        statesPolyObjects[i].setOptions({ strokeWeight: '2' });
        });
    })(i)
}
28

i переменная.
Когда обработчик события действительно выполняется,i находится после конца массива.

Вам нужно обернуть тело цикла в самопризывающуюся функцию, которая принимаетi в качестве параметра.
Таким образом, каждая итерация получит свою собственную, неизменную,i переменная.

Например:

for (var i = 0; i < statesPolyStrings.length; i++) {
    (function(i) {
        ...
    })(i);
}
2

он создает новую область видимости (может быть, google для & quot; области видимости в функциях javascript & quot;) и поэтому обрабатываетi в качестве другой переменной и предоставляет правильное значение для функции обратного вызова слушателя событий.

Но на самом деле вам не нужно искать свой элементagain с jQuery, так как вы уже назначили прослушиватель событий для него, и внутри вашей функции у вас есть ссылка на ваш элемент сthis.

И так как вы все равно используете jQuery, то легко найти правильный индекс (вашi) изstatesPolyObjects с$.inArray() передавая идентификатор вашего элемента иstatesPolyStrings массив (при условии, что вы имеете дело с уникальными идентификаторами. Если нет,$("#"+statesPolyStrings[i]) также потерпит неудачу, так как это займет первое, что он найдет).

var el;

for (var i = 0, len = statesPolyStrings.length; i < len; i++) {
    el = document.getElementById(statesPolyStrings[i]);

    google.maps.event.addDomListener(el, 'mouseover', function(event) {
        $(this).addClass("highlight");
        statesPolyObjects[$.inArray(this.id, statesPolyStrings)].
            setOptions({ strokeWeight: '2' });
    });
}

Если вы все еще хотите придерживаться функции самовоспроизведения, вы должны в любом случае изменить следующую строку:

("#"+statesPolyStrings[i]).addClass("highlight");

в

$(this).addClass("highlight");

Если вы недостаточно знакомы сthis и события, которые вы можете прочитать в этой статье: http://www.sitepoint.com/javascript-this-event-handlers/

Вы могли заметить, что я тоже написал аргументevent внутри анонимной функции обратного вызова. Пробоватьconsole.log это событие вы получаете бесплатно с любой функцией обратного вызова слушателя событий и исследуете все остальные вещи, к которым у вас есть доступ. Например, вы можете найти фактический элемент, на который вы нажалиevent.target (поскольку фактическое наведение мыши могло произойти с дочерним элементом вашего элемента). Так:

google.maps.event.addDomListener(el, 'mouseover', function(event) {
    console.log(event);
    ...

и откройте консоль вашего браузера, чтобы увидеть, какое событие доставляет ...

Имейте в виду, чтоgoogle.maps.event.addDomListener проходит что-то другое, тоdocument.body.addEventListener и есть также разница между браузерами. Например, jQuery.on () также предоставляет некоторые разные вещи в объекте события, но там вы можете по крайней мере рассчитывать на одни и те же данные во всех браузерах.

Похожие вопросы