динамический обработчик события
Есть несколько елементов div, содержание и колличество которых генерируется динамически.
Задача состоит в назначении класса div'у при наведении на него курсора и при этом должны обнуляться классы всех остальных дивов. Моя задумка такая: после генерации дивов запускается следующая функция function addevnt() { divarr=document.getElementById('cell').getElementsByTagName('div') var ce=0 while (ce<divarr.length) { divarr[ce].onmouseover=evnt ce++ } } назначающая дивам обработчик события. Cледующая функция должна заменять класс function evnt(cln) { divarr=document.getElementById('cell').getElementsByTagName('div') var ce=0 while (ce<divarr.length) { divarr[ce].className='' ce++ } divarr[cln].className='clss' } Но этого не происходит, поскольку непонятно, как определить, на какой именно див был наведен курсор. При назначении обработчика, как я понимаю, нельзя указать статическую переменную индитифицирующую конкретный див. Есть идеи, как решить такую задачу? |
Вам, наверное, такое нужно:
<style> .active { color: red; text-decoration: underline; } </style> <script> function handler(elem) { var divs = document.getElementById("container").getElementsByTagName("div"); for (var i=0; i!=divs.length; ++i) divs[i].className=''; elem.className='active'; }; window.onload= function() { var divs = document.getElementById("container").getElementsByTagName("div"); for (var i=0; i!=divs.length; ++i) divs[i].onmouseover=function(elem) {return function(){handler(elem)}}(divs[i]); }; </script> <div id="container"> <div>Text 1</div> <div>Text 2</div> <div>Text 3</div> <div>Text 4</div> </div> Хотя намного проще так: <style> #container div:hover { color:red; text-decoration: underline; } </style> <div id="container"> <div>Text 1</div> <div>Text 2</div> <div>Text 3</div> <div>Text 4</div> </div> Ах да, ie6... |
trikadin, Все работает! Спасибо большое!
Цитата:
|
Часовой пояс GMT +3, время: 19:11. |