排他思想的优化版`
<script>
//第一种思路 : 好理解,代码效率不高 (存在重复设置)
先无条件的把所有按钮的样式全部取消
for (var j = 0; j < buttonList.length; j++) {
buttonList[j].style.backgroundColor = '';
buttonList[j].innerText = '哼哼';
};
设置this的样式
this.style.backgroundColor = 'pink';
this.innerText = '哈哈';
</script>
``` 排他思想的核心思路是: 1.获取按钮元素,然后遍历此元素得到一个伪数组; 2.我们先把所有的按钮背景颜色去掉 (干掉所有人); 3.再重新给我们点击的按钮添加背景颜色(留下我自己);
这种写法有个致命的缺点,就是每次运行此代码都会遍历一次数组去掉每个元素的样式(包括自己),然后在给我么需要的元素添加样式,浏览器的重复执行了很多任务,代码运行效率不高。那么我们能不能只给我们需要按钮修改样式。
第二种思路
//第二种思路 : 不好理解,代码效率高
//排他思想 : 遍历每一个按钮,判断这个按钮与this是不是同一个
for (var j = 0; j < buttonList.length; j++) {
if (buttonList[j] == this) {//是自己
buttonList[j].style.backgroundColor = 'pink';
buttonList[j].innerText = '哈哈';
} else {//不是自己
buttonList[j].style.backgroundColor = '';
buttonList[j].innerText = '哼哼';
};
};
第二种排他思想跟第一种没上面太大的区别,只是增加了if判断;即,判断是自己就修改样式,不是自己就设置默认样式,大大提高了代码效率