所谓的排他思想通俗来说就是我们去租房子,我们的房东要先帮我们将里面的住客清除掉,再让我们入住
下方五个按钮,我们给它们添加点击事件,来改变它们的样式
这是我们依次点击,会发现下方的情况,点击下一个按钮时上一个按钮没有恢复到点击之前的颜色
而我们需要的效果是点击其中一个按钮样式改变后其他的样式都要恢复原样,这个时候我们就要用到排他思想,代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</div>
<script>
//获取所有按钮的元素集合,即<button>元素列表。
let btn = document.querySelectorAll('button')
//使用forEach循环按钮元素
btn.forEach(item=>{
//给每一个button绑定onclick事件,这意味着按钮可以点击并且应用程序将调用该函数。 这
item.onclick = function() {
console.log(this) //当前点击的按钮
btn.forEach(val=>{
val.style.backgroundColor = '' //再次循环先将所有按钮恢复背景色
})
this.style.backgroundColor = 'yellow' //再给当前点击到的按钮的背景色设置为黄色
}
})
</script>
</body>
<style>
button{
width: 80px;
height: 40px;
}
</style>
</html>