Присвоить события onmouseover генерируемому списку Dyanmical - PullRequest
Новая
       10

Присвоить события onmouseover генерируемому списку Dyanmical

0 голосов
/ 11 октября 2011

Я хочу создать функцию на JavaScript для управления списком элементов.Список генерируется CMS, и я могу влиять на него только с помощью JavaScript.

Давайте предположим, что список выглядит следующим образом: 

<ul id="someUniqueID"> 
  <li class="genericClass" id="uniqueGeneratedID"><a href="link1.htm">Link</a></li>
  <li class="genericClass" id="uniqueGeneratedID2"><a href="link2.htm">Link 2</a></li> 
  <li class="genericClass" id="uniqueGeneratedID3"><a href="link3.htm">So on and so forth</a></li> 
</ul>

Теперь я знаю, что JavaScript предлагает возможность использовать 

document.getElementById('uniqueGeneratedID').onmouseover = doSomething(); 
function doSomething(){ //code here }

Что бы я хотелвместо этого нужно захватить все эти li и назначить функцию onmouseover для каждого из них без конкретной идентификации каждого элемента li.

Я делал это следующим образом, 

var x = document.getElementsByTagName('li'); 
var changeId = new Array(); 
for (var i = 0; i < x.length; i++)
{
    var j = 0; 
    changeId[j] = x[i].id;
    j++; 
} 
function mouseOver() {
for(var y = 0; i < x.length;  y++){
        document.getElementsById(changeId[y]).onmouseover = test(changeId[y]); 
    }    
}
function test(storeContent){
    document.getElementsById('storeContent').innerHTML = 'printing' + testId; 
}
mouseOver();

Проблема, конечно, в том, что это фактически не генерирует никакого намыла над событием для идентификаторов.Есть ли способ динамически назначать всем ли событиям onmouseover, не проходя генерацию 

document.getElementsById('uniqueGeneratedID').onmouseover = doEvent(); 
document.getElementsById('uniqueGeneratedID2').onmouseover = doEvent();

и т. Д.?

Спасибо за любую помощь или предложения.

1 Ответ

1 голос
/ 11 октября 2011

Быстрый и грязный способ - захватить родителя <ul> и просмотреть его потомки: 

var ul = document.getElementById("someUniqueID"),
    lis = ul.getElementsByTagName("li");

for (var i = 0, l = lis.length; i < l; i++) {
    lis[i].onmouseover = function() {
        this.style.color = "red";
    };
}

Пример: http://jsfiddle.net/rttXQ/

...