JS中解决for循环中引用同一循环变量对象的方法
2019-03-15 本文已影响0人
MSmileL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>第四章</title>
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<script>
var btns = document.getElementsByTagName('button');
for(var i = 0;i<3;i++){
btns[i].onclick=function(){
alert(i+1);//输出值永远是4
}
}
</script>
</body>
</html>
方法一：在点击函数前存储循环变量 i 的值
for(var i=0;i<btns.length;i++){
btns[i].index = i;
btns[i].onclick = function(){
alert(this.index+1);
};
}
方法二：用ECMA新增let关键词代替var
let关键字，将变量绑定在声明它的作用域中（即块级作用域）。
for(var i=0;i<btns.length;i++){
(function(j){
btns[j].onclick = function(){
alert(j);
};
})(i);
}
方法三：用ECMA新增let关键词代替var
let关键字，将变量绑定在声明它的作用域中（即块级作用域）。
for(let i=0;i<btns.length;i++){
btns[i].onclick = function(){
alert(i);
};
}
方法四：在for循环外部创建独立的函数作用域，将循环变量值传过去
for (var i = 0; i < 3; i++) {
bindEvent(i); //每循环一次就传一次i
};
function bindEvent(n) {
btns[n].onclick = function () {
alert(n);
};
原文：https://blog.csdn.net/weixin_38636706/article/details/74995535
