排他思想
解题思路：按钮，被鼠标点击，此按钮背景变为粉色，其它按钮背景不变
循环排他（炸弹式）干掉所有，复活一个
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
let button = document.querySelectorAll('button')
for (let i = 0; i < button.length; i++) {
button[i].onclick = function () {
for (let j = 0; j < button.length; j++) {
button[j].style.backgroundColor = ''
}
this.style.backgroundColor = 'pink'
}
}
</script>
</body>
类名排他（机枪式）干掉一个，复活一个
<style>
.pink {
background-color: pink;
}
</style>
<body>
<button class="pink">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
let buttonList = document.querySelectorAll('button')
for (let i = 0; i < buttonList.length; i++) {
buttonList[i].onclick = function () {
document.querySelector('.pink').classList.remove('pink')
this.classList.add('pink')
}
}
</script>
</body>
如果使用循环排他，就使用.style，如果使用类名排他，就使用.classList，不要混着用。而且如果你使用类名排他的话，就必须有一个，比如上面的例子，就必须有一个按钮已经加了.pink类哦。还有就是，判断不同的情况使用不同的方法，有类名的话，就使用类名排他，没有的话，就使用循环排他。
