js for循环获取不到下标

最新推荐文章于 2024-04-16 10:03:08 发布

胖哒哒

最新推荐文章于 2024-04-16 10:03:08 发布

阅读量1.7k

点赞数

分类专栏：前端

原文链接：https://blog.csdn.net/boysky0015/article/details/72973391

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1，在正常的js中

	for(var i=0; i< 6; i++){
	    console.log(i); 
	}
	输出的结果为：0,1，2,3，4,5

2，当运用到代码中

	<!DOCTYPE html>
	<html>
	<head>
	    <meta charset="utf-8">
	    <title>闭包</title>
	    <style type="text/css">
	        *{
	            margin: 0;
	            padding: 0;
	        }
	        ul,li{
	            list-style: none;
	        }
	        .list{
	            width: 100%;
	            height: 300px;
	            background: #f99;
	        }
	        .list li{
	            width: 100%;
	            height: 40px;
	            background: yellow;
	            margin-bottom: 10px;
	        }
	        .center{
	            display: flex;
	            justify-content: center;
	            align-items: center;
	        }
	    </style>
	</head>
	<body>
	    <ul class="list">
	        <li class="center">1</li>
	        <li class="center">2</li>
	        <li class="center">3</li>
	        <li class="center">4</li>
	        <li class="center">5</li>
	        <li class="center">6</li>
	    </ul>
	    <script type="text/javascript">
	        var list = document.getElementsByTagName("li");
	        //console.log(list.length); //6  这里每次打印结果都是6
	         for(var i = 0;i < list.length; i++){
	            list[i].onclick = function(){
	                console.log(i);
	            }
	        }
	    </script>
	</body>
	</html>

上述问题就出在作用域块中，下面说一下三种解决方法

第一种通过index属性

for(var i = 0;i < list.length; i++){
    list[i].index = i;
    list[i].onclick = function(){
        var index = this.index;
        console.log(index);
    }
}

第二种闭包

for( var i = 0; i < list.length; i++){
    (function(index){
        list[i].onclick = function(){
            console.log(i);
        }
    })(i)
}

第三种 let

for(let i = 0; i < 6; i++){
    setTimeout(function(){
        console.log(i);
    },1000)
}

胖哒哒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js for循环获取不到下标

1，在正常的js中 for(var i=0; i< 6; i++){ console.log(i); } 输出的结果为：0,1，2,3，4,52，当运用到代码中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>闭包...
复制链接

扫一扫