<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<button class="btn">btn0</button>
<button class="btn">btn1</button>
<button class="btn">btn2</button>
<button class="btn">btn3</button>
<button class="btn">btn4</button>
<button class="btn">btn5</button>
</body>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script>
var btnArray = document.getElementsByClassName('btn');
for (var i = 0; i < btnArray.length; i++) {
btnArray[i].onclick = function () {
alert(i);
};
}</script></html>这样的i都是一样的解决方法
其中比较简单的一种方法就是为将循环写在一个闭包中。JS代码如下:
var btnArray = document.getElementsByClassName('btn');
for (var i = 0; i < btnArray.length; i++) {
btnArray[i].onclick = (function close(j) {
return function () {
alert(j);
}
})(i);
}
这是因为 for 循环的里面 var 定义的变量 i 自动提升为全局变量 for改成let就可以
var btnArray = document.getElementsByClassName('btn');
for (let i = 0; i < btnArray.length; i++) {
btnArray[i].onclick = (function close(j) {
return function () {
alert(j);
}
})(i);
}
document.onclick = function(event){
//IE doesn't pass in the event object
event = event || window.event;
//IE uses srcElement as the target
var target = event.target || event.srcElement;
target.onclick = function () {
alert(target.innerHTML.substr(3));
}
};
261
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
