js 解决js for 循环中的闭包问题

在js中想要取出for循环中的值一直都是很多新手的一大难题，正好近期做过一些这样的案例，在这里大言不惭的讲解下

例一：

var arrlist=document.querySelectorAll('li');
//在这里我们获取下所有的li标签，并为其添加click事件
for(var i=0;i<arrlist.length;i++)
{
   arrlist[i].addEventListener('click',function(){
         alert(i);
})
}

当我们执行完之后或发现，弹窗里的值始终为

arrlist.length

在这里我们需要了解下这块js的执行顺序

当我们执行这块循环，并为其添加点击事件时并没有把当前的i值保存下来，

而是循环继续执行，当我们执行点击事件时i值已经为arrlist.length-1,然后再加上1，所以为arrlist.length

在这里我提供两种解决方法

解决方案一：

var arrlist=document.querySelectorAll('li');
//在这里我们获取下所有的li标签，并为其添加click事件
for(var i=0;i<arrlist.length;i++)
{
//在这里我们把i作为一个属性存储到arrlist[i]中
   arrlist[i].i=i;
   arrlist[i].addEventListener('click',function(){
         alert(arrlist[i].i);
})
}

解决方二：

var arrlist=document.querySelectorAll('li');
//在这里我们获取下所有的li标签，并为其添加click事件
for(var i=0;i<arrlist.length;i++)
{
  //把当前的点击事件包含在代码块中，自动执行，并传值
 (function(value){
arrlist[i].addEventListener('click',function(){
         alert(value);
})(i)})}


这样我们就可以得到我们所需要的值，有其他想法的欢迎和我联系

qq:572712675