2

我通过以下方式获取具有共享 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.
};

但是如何获得触发 te 事件的 NodeList 的索引？以及如何为数组的每个元素分配唯一名称？

4

2 回答 2

2

这是我要做的：

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/

于 2013-04-11T14:57:19.247 回答
0

您可以将其包含在函数签名中：

for(var i = 0; i < btn.length ; i++) {
  btn[i].onclick = doSomething(i);
};

function doSomething(i) {
    return function() {
        btn[1].innerHTML = i;
    }
};
于 2013-04-11T14:46:44.990 回答