Обратитесь к объекту HTML элемента списка правильно в JavaScript для регистрации событий

голоса
1

Я хотел бы знать, как я могу сослаться на объект элемента списка, если бы я, например, следующий список 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 без ее иметь уникальный 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);;  
}
Задан 10/12/2008 в 06:46
источник пользователем
На других языках...                            


3 ответов

голоса
2

Вы можете получить все дети элементы 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?

Ответил 10/12/2008 в 06:59
источник пользователем

голоса
1

@Supernovah: Вы действительно можете назначить реальную функцию 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().

Ответил 10/12/2008 в 08:52
источник пользователем

голоса
0

В réponse на комментарии по Ответу Benry пути Benry, после использования его коды, следующий доказывает, что каждый elementLi может упоминаться с ELS [я]

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));
}
}
Ответил 10/12/2008 в 07:29
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more