JS之排他思想

干掉所有人，留下我自己

HTML

<button>按钮1</button>   

<button>按钮2</button>    

<button>按钮3</button>    

<button>按钮4</button>  

JS

1.先获取所有按钮元素

let btns = document.querySelectorAll("button");

2.循环的绑定事件

for(let i = 0; i < btns.length; i++) {

    btns[i].onclick=function() {

        // 1.先把所有的按钮背景颜色去掉（干掉所有人）

        for(let i = 0; i<btns.length; i++) {

            btns[i].style.backgroundColor = ' ';

        }

        // 2.再让当前按钮显示背景颜色（留下我自己）

        this.style.backgroundColor = 'red';

    }

}