Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.03.2014, 23:53
Новичок на форуме
Отправить личное сообщение для spaik Посмотреть профиль Найти все сообщения от spaik
 
Регистрация: 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, также будет устанавливаться в последнюю позицию),следовательно обработчик будет срабатывать только при клике на третьем элементе(на деле срабатывает на всех элементах). Объясните пожалуйста логику работы этого скрипта и в чём моя ошибка.
Ответить с цитированием
  #2 (permalink)  
Старый 31.03.2014, 00:19
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 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>
Ответить с цитированием
  #3 (permalink)  
Старый 31.03.2014, 00:35
Новичок на форуме
Отправить личное сообщение для spaik Посмотреть профиль Найти все сообщения от spaik
 
Регистрация: 30.03.2014
Сообщений: 3

Хорошо, а как тогда быть если нужно, чтобы при клике по одному из описанных мной элементу менялся не сам этот элемент,а некий другой, соответствующий ему по индексу?
Ответить с цитированием
  #4 (permalink)  
Старый 31.03.2014, 00:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

spaik,
http://javascript.ru/basic/closure#p...-ispolzovaniya
Ответить с цитированием
  #5 (permalink)  
Старый 31.03.2014, 00:44
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 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";
Ответить с цитированием
  #6 (permalink)  
Старый 31.03.2014, 00:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Сообщение от Poznakomlus
чтобы обратится к нужному элементу
--- это спам )))
Poznakomlus,
где индекс то взять в вашем коде его нет -- у вас this
Ответить с цитированием
  #7 (permalink)  
Старый 31.03.2014, 01:09
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 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>
Ответить с цитированием
  #8 (permalink)  
Старый 31.03.2014, 02:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105


<!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>
Ответить с цитированием
  #9 (permalink)  
Старый 31.03.2014, 03:46
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 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.
Ответить с цитированием
  #10 (permalink)  
Старый 31.03.2014, 08:16
Новичок на форуме
Отправить личное сообщение для spaik Посмотреть профиль Найти все сообщения от spaik
 
Регистрация: 30.03.2014
Сообщений: 3

В моём примере сей глюк связан с областями видимости переменных.Проблема решается посредством замыкания.Спасибо за помощь
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Обработка события после закрытия модального окна byaka Events/DOM/Window 3 11.08.2012 19:19
Цепная обработка события MouseDown с использованием jQuery gifer Events/DOM/Window 0 18.02.2011 16:55
Обработка события элемента внутри создавшего его объекта pauluss Общие вопросы Javascript 10 10.09.2010 17:01
Обработка события выделения текста cabelas jQuery 0 26.11.2009 15:03
Обработка события Deep Events/DOM/Window 12 29.07.2009 22:58