的JavaScript - 检测的元素的索引被点击在节点列表

我具有由通过获取与共享的className HTML元素创建的节点列表：的JavaScript - 检测的元素的索引被点击在节点列表

> 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的索引？我怎样才能为数组的每个元素分配唯一的名称？

来源

2013-04-11 Barend Huberts

另外：如果什么DoSomething的（）函数的代码如下：BTN [1]。 innerHTML = //被点击的项目的索引 – 2013-04-11 14:45:40

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

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

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

来源

2013-04-11 14:46:44

这不起作用：因为如果您将参数传递给doSomething（）函数，该函数将在事件之前被调用。 – 2013-04-11 14:49:17

是的，但它返回一个函数，那么onclick属性是不是仍然会被分配一个事件处理程序？ – 2013-04-11 14:51:54

@BarendHuberts：没有封闭将封装变量...你可以在这里检查：http://jsfiddle.net/8xXRu/。 – 2013-04-11 14:52:29

这里就是我想要做的：

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-11 14:57:19 MasNotsram

thx，这确实是有帮助的。我无法为每个类名分配一个唯一的名称。而这段代码解决了这个问题。这是很好的brainfood :) – 2013-04-11 15:04:09

很高兴帮助:)在循环中，将btn [i]放入变量中会更有效，因此您不必每次都从阵列中拉出，但性能差异可能会不明显。 – MasNotsram 2013-04-11 15:08:25

的JavaScript - 检测的元素的索引被点击在节点列表

回答

相关问题