for循环取出每个i的值

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<script type="text/javascript">
var btns=document.querySelectorAll("button");
//i的值等于btns.length
for(var i=0;i<btns.length;i++){
    btns[i].onclick=function () {
        console.log(i);//5
    }
}
// 方法一:自定义属性
for(var i=0;i<btns.length;i++){
	btns[i].index=i;
	console.log('i',btns[i].index)
	btns[i].onclick=function(){
		console.log(this.index);
	}
}
// 方法二：闭包，自执行函数传参i
for(var i=0;i<btns.length;i++){
	(function(i){
		btns[i].onclick=function(){
			console.log(i)
		}
	})(i)
}
// 方法三：es6,let声明变量
for(let i =0;i<btns.length;i++){
	let i=10;
	console.log(i)
}
console.log(i)
</script>

</body>
</html>

posted @ 2019-07-03 19:40 jser_dimple 阅读(1325) 评论(0) 编辑收藏举报

刷新页面返回顶部