js的排他思想案例

我们想要当我们点击按钮时，当前的按钮变成粉色，其他的按钮恢复初始颜色

<button>按钮1</button>
<button>按钮2</button>   //html样式
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

 然后再获取元素

//获取元素
var btn = document.querySelectorAll('button')

我们想要获取所有的button按钮 需要进行遍历 ，因为我们得到的都是伪数组

 for(var i=0;i<btn.length;i++){
       btn[i].onclick = function(){
       this.style.backgroundColor='pink'   //添加点击之后按钮的颜色
}
}

 如果我们仅仅这么写，那么我们每点击一次按钮按钮的颜色变成粉色，但是当我们点击其他按钮的时候，开始点击的按钮不会恢复原来的颜色，而是点击的按钮都会变成粉色

那么我们有需要再遍历一次，让所有按钮再点击之前都是最初的状态（颜色）

for(var i=0;i<btn.length;i++){
        btn[i].onclick = function(){
                //在点击之前我们必须把所有按钮的背景色去掉
             for(var i=0;i<btn.length;i++){
                btn[i].style.backgroundColor=''
                }
                //然后才能让当前的元素背景颜色为pink  留下自己
                this.style.backgroundColor='pink'
//这是最后完整的js代码
          }
 }

这样当我们点击下一个按钮的同时之前按过的按钮就会恢复初始的样子，页面就只会留下当前点击的按钮颜色