for循环取出每个i的值

最新推荐文章于 2023-10-07 21:10:00 发布

bailu7213

最新推荐文章于 2023-10-07 21:10:00 发布

阅读量531

点赞数

原文链接：http://www.cnblogs.com/webcode/p/9298138.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<script>
var btns=document.querySelectorAll("button");


//i的值等于btns.length
for(var i=0;i<btns.length;i++){
    btns[i].onclick=function () {
        console.log(i);
    }
}

//取出每个i的值的方法

//方法一：自定义属性
for(var i=0;i<btns.length;i++){
    btns[i].index=i;
    btns[i].onclick=function () {
        console.log(this.index);
    }
}

//方法二：闭包，自执行函数传参i
for(var i=0;i<btns.length;i++){
    (function (i) {
        btns[i].onclick=function () {
            console.log(i);
        }
    })(i)
}

//方法三：es6，let声明变量
for(let i=0;i<btns.length;i++){
    btns[i].onclick=function () {
        console.log(i);
    }
}


//思考：let声明，循环语句之内是一个父作用域，在循环体之中是一个子作用域，彼此分离
for(let i=0;i<btns.length;i++){
   let i=10;
   console.log(i);
}

console.log(i);



</script>
</body>
</html>

ES6的思考，控制台结果如下图：

转载于:https://www.cnblogs.com/webcode/p/9298138.html

bailu7213

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
for循环取出每个i的值

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><button>1</button>...
复制链接

扫一扫