排他思想(算法)
如果有同一组元素,我们想要某一个元素实现某种样式,需要用到循环的排他思想算法:
- 所有元素全部清除样式(干掉其他人)
- 给当前元素设置样式(留下我自己)
- 注意顺序不能颠倒,首先干掉其他人,再设置自己
代码验证
<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]
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
console.log('11');
// 我们先把所有的按钮背景颜色去掉
for (var j = 0; j < btns.length; j++) {
btns[j].style.backgroundColor = '';
}
//再把当前的按钮背景颜色设置成pink
this.style.backgroundColor = 'pink';
}
}
</script>
运行结果
点击哪一个按钮,哪一个按钮的背景颜色变成pink
注意事项
- getElementsByTagName(‘button’) 获取的是一个伪数组
- 这里利用了双重for循环
- 首先先排除其他人,然后才设置自己的样式,这种排除其他人的思想我们称为排他思想