Question

我通过以下方式获取具有共享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的索引？如何为数组的每个元素分配唯一的名称？

Answer 1

这就是我要做的事情：

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/

Answer 2

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

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

function doSomething(i) {
    return function() {
        btn[1].innerHTML = i;
    }
};

JavaScript - 检测在NodeLIst中单击的元素的索引

2 个答案: