динамический обработчик события
Есть несколько елементов 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, время: 09:55. |