案例源码:点击小盒子添加背景色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击 DIV 换色</title>
<link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.item {
width: 100px;
height: 50px;
border: solid 1px rgb(42, 156, 156);
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="page-header">点击切换颜色</h2>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
// 获取div元素对象
let items = document.getElementsByClassName('item');
// 遍历绑定事件
for (let i = 0; i < items.length; i++) {
items[i].onclick = function() {
// this.style.background = 'pink';
items[i].style.background = 'pink';
}
}
</script>
</body>
</html>
此处如果用var声明变量 i ,就只能通过 this. 改变背景色,而用 let,两者都可以。这是因为使用var声明的变量在循环结束后就会变成3,而 items[3] 不存在,无论怎么点都改变不了背景色,而使用了 let 声明变量就会将 i 限定在每次循环的作用域内部,从而可以使用items[i]。