WebApi——排他思想(3种方法)
排他思想的3种方式(由易到难，js效率逐渐提高，拖拽自己的思路)
第一种思路 ： 好理解，代码效率不高 (存在重复设置)
<body>
<button>哼哼</button>
<button>哼哼</button>
<button>哼哼</button>
<button>哼哼</button>
<button>哼哼</button>
<script>
//1.获取元素
var buttonList = document.querySelectorAll('button');
//2.注册点击事件
for (var i = 0; i < buttonList.length; i++) {
buttonList[i].onclick = function () {
//3.1 先无条件的把所有按钮的样式全部取消
for (var j = 0; j < buttonList.length; j++) {
buttonList[j].style.backgroundColor = '';
};
//3.2 设置this的样式
this.style.backgroundColor = 'pink';
};
};
</script>
</body>
第二种思路 ： 不好理解，代码效率高
<body>
<button>哼哼</button>
<button>哼哼</button>
<button>哼哼</button>
<button>哼哼</button>
<button>哼哼</button>
<script>
//1.获取元素
var buttonList = document.querySelectorAll('button');
//2.注册点击事件
for (var i = 0; i < buttonList.length; i++) {
buttonList[i].onclick = function () {
//排他思想 ： 遍历每一个按钮，判断这个按钮与this是不是同一个
for (var j = 0; j < buttonList.length; j++) {
if (buttonList[j] == this) {//是自己
buttonList[j].style.backgroundColor = 'pink';
} else {//不是自己
buttonList[j].style.backgroundColor = '';
};
};
};
};
</script>
</body>
第三种思路 ： 不好理解，代码效率最高
<body>
<button>哼哼</button>
<button>哼哼</button>
<button>哼哼</button>
<button>哼哼</button>
<button>哼哼</button>
<script>
//1.获取元素
var buttonList = document.querySelectorAll('button');
//声明一个全局变量
var flag = null;
//2.注册点击事件
for (var i = 0; i < buttonList.length; i++) {
buttonList[i].onclick = function () {
//因为null转布尔值为false，所以第一次不会执行if里面的代码，当第二次点击按钮的时候，flag的值会转true，(8种值会转换为false，分别是：0，-0，null，undefined，NaN，false，''，document.all()，其余一切数据都转true)会把上次点击的按钮的变色效果去除
if(flag)
flag.style.backgroundColor = '';
//当前点击的按钮变色
this.style.backgroundColor = 'pink';
//把当前的按钮赋值给flag
flag = this;
};
};
</script>
</body>
版权声明：本文为weixin_45786584原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。