<body>
<button></button>
<button></button>
<button></button>
<button></button>
</body>
<script type="text/javascript">
$(function() {
$('button').click(function() {
//为当前元素设置样式
$(this).css('background', 'red')
//sibling会选择除了本身以外的元素 利用起来设置其他元素 实现排他思想
$(this).siblings().css('background', '#fff')
})
})
//原生JS 需要for循环遍历实现排他思想
var but = document.querySelectorAll('button')
console.log(but)
for (var i = 0; i < but.length; i++) {
but[i].addEventListener('click', function() {
for (var a = 0; a < but.length; a++) {
but[a].style.background = '#fff'
}
this.style.background = 'red'
})
}
</script>
注意:jquery使用eq[i]而JS直接是元素[i]