我有一个预加载的页面,我正在尝试将 onclick 事件添加到具有特定类名的所有节点。但是onclick中的函数应该使用其中的元素节点。
var elemArr=document.getElementsByClassName('ABC');
for(var i=0;i<elemArr.length;i++){
elemArr[i].onclick = function()
{
console.log(elemArr[i]); // This is being returned as undefined
// How can I use elemArr[i] here
};
}
我试过了
for(var i=0;i<elemArr.length;i++){
printObj=elemArr[i];
elemArr[i].onclick = function()
{
console.log(printObj);
var newObject = jQuery.extend(true, {}, printObj);
console.log(newObject );
};
}
但是没有用。我觉得上面的方法无论如何也行不通。我该如何解决这个问题..?
最佳答案
您应该使用 function
将代码包装在 loop
内,以便为每个事件处理程序创建 i
的新副本,像这样。
var elems = document.getElementsByClassName('elem');
if (elems.length) {
for (var i = 0, l = elems.length; i < l; i++) {
(function(i) {
elems[i].onclick = function() {
alert('Element #' + i);
}
})(i);
}
}
// Could also use bind for slighlty cleaner code
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
for (var i = 0, l = elems.length; i < l; i++) {
elems[i].onmousedown = (function(index, e) {
console.log('MouseDown - Element #' + index);
}).bind(elems[i], i);
}
<div class="elem">Elem #1</div>
<div class="elem">Elem #2</div>
<div class="elem">Elem #3</div>
关于javascript - 动态添加 onclick 到元素,传递函数参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27425774/