排他算法 · vue

案例：點擊按鈕，當前按鈕背景改變顏色，其他的不變 1. getElementsByTagName(‘button’) 獲取的是一個偽數組 2. 這里利用了雙重for循環 3. 首先先排除其他人，然后才設置自己的樣式，這種排除其他人的思想我們稱為排他思想 ``` <!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> <button>按鈕1</button> <button>按鈕2</button> <button>按鈕3</button> <button>按鈕4</button> <button>按鈕5</button> <script> var btns = document.querySelectorAll('button'); for(var i = 0;i < btns.length; i++){ btns[i].onclick = function() { //按鈕綁定循環事件 //（1）我們先把所有的背景顏色去掉 for(var j = 0 ; j<btns.length ; j++) { btns[j].style.backgroundColor = ''; } //（2）然后才讓當前元素背景顏色為pink this.style.backgroundColor = 'pink'; } } </script> </body> </html> ``` ![](https://img.kancloud.cn/de/33/de33ee04e781c62da67505fc9fba54ef_354x224.png)