js 解决js for 循环中的闭包问题
2017-05-06 17:44
756 查看
在js中想要取出for循环中的值一直都是很多新手的一大难题,正好近期做过一些这样的案例,在这里大言不惭的讲解下
例一:
当我们执行完之后或发现,弹窗里的值始终为
当我们执行这块循环,并为其添加点击事件时并没有把当前的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){
这样我们就可以得到我们所需要的值,有其他想法的欢迎和我联系
qq:572712675
例一:
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
相关文章推荐
- js的一个有意思的小题,闭包解决getElementByTagName的for循环绑定事件错误问题
- 解决JS循环闭包导致索引始终为最后值的问题
- JS之经典for循环闭包问题解决方法
- 浅谈js for循环输出i为同一值的问题(闭包解决)
- JS之经典for循环闭包问题解决方法
- JavaScript的闭包问题(闭包解决引用循环变量的问题)
- js for循环变量值永远是最后一个解决方法(闭包)
- 用9种办法解决 JS 闭包经典面试题之 for 循环取 i
- swift之闭包循环引用问题及解决方式
- Xcode8的调试技能Memory Graph 实战解决闭包引用循环问题
- 采用自执行的匿名函数解决for循环使用闭包的问题
- 诡异的js闭包问题的解决.
- 使用 let 解决for 循环闭包 i变量问题
- X-code -- xcode8之Memory Graph实战解决闭包引用循环问题
- 闭包循环执行的问题解决
- 用9种办法解决 JS 闭包经典面试题之 for 循环取 i
- 动态循环给onclick赋值(解决闭包问题)
- JS中批量给元素绑定事件过程中的相关问题使用闭包解决
- 解决swift中闭包中循环引用self 的问题
- Xcode8调试黑科技:Memory Graph实战解决闭包引用循环问题