Проблема с использованием значений цикла в функции

Question

Вопрос Javascript для начинающих здесь.

Я пытаюсь создать функцию, которая находит все ссылки в данном div и устанавливает событие onclick для каждой из них. Я могу получить ссылку hrefs правильно, но когда я пытаюсь использовать их в функции onclick, Javascript, кажется, использует только последнее найденное значение:

т.е. У меня есть эти ссылки

# * Цель 1007 *

# будущее

# чаво

Когда я использую функцию onclick, каждая ссылка отображается как ссылка #faq.

Вот код:

function prepareLinks () {
var nav = document.getElementById('navigation');
var links = nav.getElementsByTagName ('a');
for (var i = 0; i<links.length; i++) {  
    var linkRef = links[i].getAttribute('href').split("#")[1];
    links[i].onclick = function () {
        var popUp = "You clicked the " +linkRef +" link";
        alert (popUp);
    }
}

}

Answer 1

Здесь у вас есть замыкание создание. Внешняя переменная linkRef сохраняется во внутренней функции onclick. Попробуйте так:

clickFunction() {
    var popUp = "You clicked the " + this.href.split("#")[1] +" link";
    // this should mean current clicked element
    alert (popUp);
}

for (var i = 0; i<links.length; i++) {  
    links[i].onclick = clickFunction;
}

Answer 2

Это проблема с ограничениями. Выражение «Вы щелкнули ссылку« + linkRef + »» вычисляется при возникновении события onclick, но каково значение linkRef на данный момент?

Answer 3

Вы пытаетесь прикрепить отдельный обработчик onClick к каждой ссылке, но вы случайно подключаете один и тот же.

Вы можете генерировать новую функцию каждый раз, используя новый конструктор Function () как

links[i].onclick = new Function("","alert('You clicked the '"+linkRef+"' link');");

Подробнее см. http://tadhg.com/wp/2006/12/12/using-new-function-in-javascript/.

Но, как правило, лучше посмотреть, есть ли у вас один обработчик. Интересно, что когда вы попадаете в обработчик события, ключевое слово «this» относится к генератору события. Таким образом, ваш исходный код можно ссылаться на this.getAttribute ("href"). Слишком много обработчиков замедляют обработку событий JavaScript.