我通过获取具有共享className的HTML元素创建了一个NodeList:
> var btn = document.getElementsbyClassName("btn")
这是HTML代码:
<div id="main">
<div class="btn">
</div>
<div class="btn">
</div>
<div class="btn">
</div>
<div class="btn">
</div>
</div>
因此这个特定的NodeList对象的长度为4。
现在我想在单击其中一个元素时调用一个函数。我通过使用for循环来完成:
for(var i = 0; i < btn.length ; i++) {
btn[i].onclick = doSomething;
};
function doSomething() {
// here come some code.
};
但是我如何获得触发事件的NodeList的索引?如何为数组中的每个元素赋唯一的名称?
我会这样做:
var btn = document.getElementById('main').getElementsByTagName('div');
for(var i = 0; i < btn.length ; i++) {
btn[i].id = "btn"+i;
if(btn[i].className=="btn")
btn[i].onclick = doSomething;
};
function doSomething() {
var num = this.id.substr(3);
alert("Div " + num + " clicked");
};
(我拿出getElementsByClassName()使其跨浏览器。当然,这是假设你没有实现你自己的方法的覆盖,使其跨浏览器)。
编辑:对于您的innerHTML问题,请查看附件中的小提琴,看看它是否正常工作:http://jsfiddle.net/TdCD8/
可以将其包含在函数签名中:
for(var i = 0; i < btn.length ; i++) {
btn[i].onclick = doSomething(i);
};
function doSomething(i) {
return function() {
btn[1].innerHTML = i;
}
};