Вот упрощенный кейс моей задачи (и проблемы):
- создать список ссылок
- создать список параграфов (тескта)
- циклом добавить каждой из ссылок слушателя события по нажатию
- вызвать функцию для произошедшего события, которая "добудет" содержимое соответствующего ссылке параграфа
Вот код, который работает некорректно:
window.onload = function() {
for (var i=0; i<5; i++) {
document.write('<a href="#">Link_' + i + '</a><br/>');
}
document.write('<hr/>');
for (var i=0; i<5; i++) {
document.write('<p>Text_' + i + '</p><br/>');
}
var links = document.getElementsByTagName('a');
var texts = document.getElementsByTagName('p');
/*
for (var i=0; i<links.length; i++) {
links[i].addEventListener('click',function() {display(texts[i].innerHTML);},false)
}
*/
for (var i=0; i<links.length; i++) {
var temp = texts[i].innerHTML;
links[i].addEventListener('click',function() {display(temp);},false)
}
function display(text) {
alert(text);
}
}
Проблема:
Если использовать закоменченный кусок кода,
for (var i=0; i<links.length; i++) {
links[i].addEventListener('click',function() {display(texts[i].innerHTML);},false)
}
то javascript ругнется на то, что
texts[i] - undefined
Если использовать
for (var i=0; i<links.length; i++) {
var temp = texts[i].innerHTML;
links[i].addEventListener('click',function() {display(temp);},false)
}
то на
все ссылки будет повешена функция
display с аргументом
texts[i=4].
Вопрос:
Как можно, не меняя ничего координально в коде (т.к. это уже упрощенный случай реального кода), добиться поставленной задачи (см. выше)?
Спасибо заранее!