很多时候我们在开发过程需要for循环给元素组绑定js事件,但是直接敲的话,事件响应的效果只能和最后一个元素一样,如下面的错误代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js闭包运用</title>
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
</body>
</html>
<script>
var btn=document.getElementsByTagName('button');
for(var i=0;i<3;i++){
btn[i].οnclick=function(){
console.log(i);
}
}
</script>
这是js闭包的经典运用场景,有多种方法解决它。
第一种,可以利用(function)(),如下改进代码:
<script>
var btn=document.getElementsByTagName('button');
for(var i=0;i<3;i++){
(function(val){
btn[i].οnclick=function(){
console.log(val);
}
})(i);
}
</script>
第二种方法:写多一个函数,在该函数写一个闭包,js代码如下:
<script>
var btnshow=function(val){
return function(){
console.log(val);
}
}
var btn=document.getElementsByTagName('button');
for(var i=0;i<3;i++){
btn[i].οnclick=btnshow(i);
}
</script>
<script>
$(function(){
btn=document.getElementsByTagName('button');
$.each([0,1,2],function(index,value){
btn[value].οnclick=function(){
console.log(value);
}
})
})
</script>