30.03.2014, 23:53
|
|
Новичок на форуме
|
|
Регистрация: 30.03.2014
Сообщений: 3
|
|
|
Обработка события в теле цикла
Разметка содержит 3 элемента div класса 'div', js файл содержит следующий код:
var elements = document.getElementsByClassName('div');
for(var i=0;i<elements.length;i++){
elements[i].onclick=function (){
elements[i].style.background="red";
alert('blah-blah');
};
}
Я полагаю, что при клике на любом из элементов div должен изменяться этот элемент(на котором кликнули), но на деле изменяется только третий(причем при щелчке на любом из трёх). Здесь не могу понять логику совместной работы цикла и обработчика: ведь если стиль применяется лишь к третьему элементу(то-есть индекс elements'a внутри обработчика всегда устанавливается в последнюю позицию) то логично предположить, что обработчик должен устанавливаться лишь для третьего элемента(то есть индекс elements'a, на который вешается onclick, также будет устанавливаться в последнюю позицию),следовательно обработчик будет срабатывать только при клике на третьем элементе(на деле срабатывает на всех элементах). Объясните пожалуйста логику работы этого скрипта и в чём моя ошибка.
|
|
31.03.2014, 00:19
|
 |
Профессор
|
|
Регистрация: 13.03.2013
Сообщений: 1,572
|
|
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<script>
var elements = document.querySelectorAll('div.col'),
len = elements.length,
clickdiv = function () {
this.style.background = "red";
alert('blah-blah');
};
for (var i = 0; i < len; i++) {
elements[i].onclick = clickdiv;
}
</script>
|
|
31.03.2014, 00:35
|
|
Новичок на форуме
|
|
Регистрация: 30.03.2014
Сообщений: 3
|
|
|
Хорошо, а как тогда быть если нужно, чтобы при клике по одному из описанных мной элементу менялся не сам этот элемент,а некий другой, соответствующий ему по индексу?
|
|
31.03.2014, 00:40
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,125
|
|
|
|
|
31.03.2014, 00:44
|
|
Профессор
|
|
Регистрация: 13.03.2013
Сообщений: 1,572
|
|
|
elements - это массив ваших дивов в примере, 1 индекс 0
console.log(elements);
чтобы обратится к нужному элементу
elements[0] - 1 элемент
elements[1] - 2 элемент
elements[2] - 3 элемент
elements[2].style.background = "red";
|
|
31.03.2014, 00:53
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,125
|
|
|
Сообщение от Poznakomlus
|
|
чтобы обратится к нужному элементу
|
--- это спам )))
Poznakomlus,
где индекс то взять в вашем коде его нет -- у вас this |
|
31.03.2014, 01:09
|
|
Профессор
|
|
Регистрация: 13.03.2013
Сообщений: 1,572
|
|
рони,
|
Сообщение от рони
|
|
--- это спам )))
|
если я неправильно понял 
понятно, что по ссылке пример лучше
но и такой имеет право на жизнь
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="rez">Rezult 1</div>
<div class="rez">Rezult 2</div>
<div class="rez">Rezult 3</div>
<script>
var elements = document.querySelectorAll('div.col'),
result = document.querySelectorAll('div.rez'),
len = elements.length,
clickdiv = function () {
result[this.innerHTML - 1].style.background = "red";
alert('blah-blah');
};
for (var i = 0; i < len; i++) {
elements[i].onclick = clickdiv;
}
</script>
|
|
31.03.2014, 02:24
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,125
|
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
</head>
<body>
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="rez">Rezult 1</div>
<div class="rez">Rezult 2</div>
<div class="rez">Rezult 3</div>
<script>
var elements = document.querySelectorAll('div.col'),
result = document.querySelectorAll('div.rez'),
len = elements.length,
clickdiv = function (i) { return function () {
result[i].style.background = "red";
alert(i); }
};
for (var i = 0; i < len; i++) {
elements[i].onclick = clickdiv(i);
}
</script>
</body>
</html>
|
|
31.03.2014, 03:46
|
|
Профессор
|
|
Регистрация: 13.03.2013
Сообщений: 1,572
|
|
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="rez">Rezult 1</div>
<div class="rez">Rezult 2</div>
<div class="rez">Rezult 3</div>
<script>
var elements = document.querySelectorAll('div.col'),
result = document.querySelectorAll('div.rez');
[].forEach.call(elements, function (el, i) {
el.onclick = function () {
result[i].style.background = "red";
alert(i);
}
});
</script>
Последний раз редактировалось Vlasenko Fedor, 31.03.2014 в 20:58.
|
|
31.03.2014, 08:16
|
|
Новичок на форуме
|
|
Регистрация: 30.03.2014
Сообщений: 3
|
|
|
В моём примере сей глюк связан с областями видимости переменных.Проблема решается посредством замыкания.Спасибо за помощь
|
|
|
|
