- 排他思想：如果有同一组元素，我们想要某个元素实现某种样式，需要用到循环的排他思想
- 1）首先将所有元素清除样式（干掉所有人）
- 2)给当前元素设置样式（留下自己）
利用排他思想实现点击按钮变色
<!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>实验</title>
<style>
body{
background-color: black;
}
</style>
</head>
<body>
<!-- 排他思想 -->
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
//1.获取所有按钮元素
var btns = document.getElementsByTagName('button');
//btns得到的是伪数组，里面的每个元素btns[i]
//2.利用循环绑定事件
for(let i=0;i<btns.length;i++){
btns[i].onclick=function(){
//1)先将所有按钮的背景颜色去掉（干掉所有人）
for(let i=0;i<btns.length;i++){
btns[i].style.backgroundColor='';
}
//2)然后才让当前的元素背景颜色改为蓝色 （留下自己）
btns[i].style.backgroundColor='blue';
}
}
</script>
</body>
</html>
- 注意：在第一层大循环中
let i=0如果换成了var i=0的话下面的btns[i].style.backgroundColor='blue'中就不可以使用btns[i],只能使用this。在外循环中循环i++是给每个按钮绑定事件，当触发事件的时候才会产生效果。
个人理解：
如果使用var i：在退出循环时，迭代变量保存的时导致循环退出的值：5.在之后执行代码时，所有的i都是同一变量，所以会出现报错。这个时候只能用this，这时候this指向的就是调用函数的实例。
使用let i：而在使用let声明迭代变量时，js引擎在后台会位每个迭代循环声明一个新迭代变量，btns[i]使用的都是不同的变量实例。后台会根据我们所点击的不同序号的按钮，重新声明i的变量，i的值就会随之变化，不会报错