for循环取出每个i的值

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

转载最新推荐文章于 2023-10-07 21:10:00 发布 · 587 阅读

1 ·

CC 4.0 BY-SA版权

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

本文探讨了JavaScript中常见的事件绑定错误，特别是在循环中为多个元素绑定事件时，由于作用域问题导致的bug。通过三种不同的解决方案，包括自定义属性、闭包和ES6的let声明，详细解释了如何正确地获取每个元素对应的索引。

<!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>