es6中let实例应用之一

有如下情景

html部分:

<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
<button class="btn">按钮4</button>

js部分:

var btns = $('.btn');
for(var i=0;i<btns.length;i++) { 
    btns.eq(i).click(function () {
        alert(i);
    })   
} 

现在有个需求 点击每一个按钮,弹出该按钮对应的索引 ,但是按照上面的js执行,这样不管点击哪一个按钮,都只会弹出4 具体原因可以自行分析

传统的解决方法,是采用闭包

var btns = $('.btn');
for(var i=0;i<btns.length;i++) {
   (function(i){        
        btns.eq(i).click(function () {
            alert(i);
        })   
   })(i); 
} 

es6中利用let解决

var btns = $('.btn');
for(var let i=0;i<btns.length;i++) {
   // (function(i){        
        btns.eq(i).click(function () {
            alert(i);
        })   
   // })(i); 
} 

 

posted @ 2017-11-14 10:53  代码小伙  阅读(339)  评论(0编辑  收藏  举报