JS十大难点二

发表于 | 分类于

闭包

初识闭包

点击列表，弹出对应的序号
html

1
2
3
4
5
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>

script

1
2
3
4
5
6
var items = document.getElementsByClassName("items");
for(var i=0;i<items.length;i++){
    items[i].onclick=function(){
        console.log(i);
    }
}

结果

1
点击，总是返回5,即 items.length 的值

正确代码

html

1
2
3
4
5
<div class="items">1</div>
<div class="items">2</div>
<div class="items">3</div>
<div class="items">4</div>
<div class="items">5</div>

script

1
2
3
4
5
6
7
for(var i=0;i<items.length;i++){
     items[i].onclick=(function(num){
                return function(){
                     console.log(num);
                }
     })(i);
}

结果

1
2
点击列表，弹出对应的序号
1,2,3,4,5