利用块级作用域解决循环绑定
一 概念
```html
.html文件
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
```
```js
.js文件
var lis = document.querySelector('li');
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
// 打印列表项的索引
console.log(i);
}
}
// 变量污染
// 获取局部作用域解决
// 闭包解决
// 对象属性解决
```
二 代码示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>块级作用域解决循环绑定</title>
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
width: 80px;
height: 35px;
background-color: pink;
border-radius: 5px;
float: left;
margin-left: 3px;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script type="text/javascript">
// ES6语法中支持块级作用域
let lis = document.querySelectorAll('li');
for (let i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
alert(i)
}
}
</script>
</html>
