Обратитесь к html объекту Списка должным образом в JavaScript для Регистрации События - PullRequest
Новая
       20

Обратитесь к html объекту Списка должным образом в JavaScript для Регистрации События

1 голос
/ 10 декабря 2008

Я хотел бы знать, как я могу ссылаться на объект элемента списка, если бы у меня был, например, следующий список HTML 

<div id="subdiv_2">  
 <div id="subdiv_3">  
  <ul>  
   <li><a href="">Item1</a></li>  
   <li><a href="">Item2</a></li>  
   <li><a href="">Item3</a></li>    
  </ul>  
 </div>  
</div>

Как можно зарегистрировать onclick для Item2 li, не имея уникального elementId например, я могу сделать это для subdiv_3, потому что он имеет уникальный идентификатор и отсутствует в списке по 

document.getElementById('subdiv_3').addEventListener('click', function();, false);

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

for(i=0;i<list.length;i++){  
 "document.getElementById(list.item"+i+").addEventListener(\'click\',function("+i+");,false);";  
}

Ответы [ 3 ]

2 голосов
/ 10 декабря 2008

Вы можете получить все дочерние элементы subdiv_3, которые <li>. Затем повторите этот цикл, добавляя функции по ходу работы. 

div = document.getElementById('subdiv_3');
els = div.getElementsByTagName('li');

for (var i=0, len=els.length; i<len; i++) {
    alert(i);  // add your functions here   
}

Глядя на ваш пример кода, когда вы находитесь в цикле создания своих функций, вы можете столкнуться с проблемами определения границ. (Похоже, что все функции будут использовать одно и то же значение i.) Посмотрите мой ответ на этот вопрос, чтобы решить эту проблему: Как добавить обработчик событий с аргументами в массив элементов в Javascript?

1 голос
/ 10 декабря 2008

@ Сверхновая: вы можете назначить реальную функцию setTimeot(). Это избавляет вас от форматирования строк, которое встанет у вас на пути, когда вы захотите сделать более сложные вещи, чем просто установить одно свойство.

Это код: 

function attachToList() {
  var div = document.getElementById('menu2');
  var els = div.getElementsByTagName('li');
  // create a closure returning an anonymous inner function
  var fn  = function(li) {
    return function() {
      li.style.backgroundColor = "#FFFFCC";
    };
  };
  for (var i=0, len=els.length; i<len; i++) {
    // create function instance suitable for current iteration
    var changeLi = fn(els[i]);
    // pass function reference to setTimeout()
    setTimeout(changeLi, 250*i);
  }
}

И краткое объяснение:

Использование замыкания - это уловка, которая гарантирует, что при срабатывании setTimeout() все переменные по-прежнему имеют ожидаемые значения.

Вы делаете это, написав функцию, которая возвращает функцию. Внешняя функция принимает параметры, внутренняя функция - нет. Но это относится к параметрам внешней функции. В цикле вы вызываете внешнюю функцию (с правильными параметрами) и каждый раз получаете совершенно новую внутреннюю функцию, каждая из которых имеет свою собственную версию значений параметров. Это тот, который вы назначаете на setTimeout().

0 голосов
/ 10 декабря 2008

В ответ на комментарий к ответу Бенри Бенри, после использования его кода, следующее доказывает, что на каждый элементLi можно ссылаться с помощью els [i] 

function attachToList(){
div = document.getElementById('menu2');
els = div.getElementsByTagName('li');
for (var i=0, len=els.length; i<len; i++) {
setTimeout('els['+i+'].style.backgroundColor=\"#FFFFCC\";',(250*i));
}
}
...