排他思想(演算法)
阿新 • • 發佈:2022-03-17
如果有同一組元素,我們想要某一個元素實現某種樣式,需要用到迴圈的排他思想:
- 所有的元素全部清除(首先排除其他人,再設定自己的樣式)
- 給當前的元素設定樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <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> <script> // 首先獲取所有的元素 var btns = document.querySelectorAll("button"); for (var i = 0; i < btns.length; i++) { btns[i].onclick = function () { for (var i = 0; i < btns.length; i++) { // 首先要將所有的元素樣式清空 btns[i].style.backgroundColor = ""; } // 然後再給自己的樣式 this.style.backgroundColor = "pink"; // 如果只用一個for迴圈的話就會點選下一個的時候,前面的不會清空,所以先清空,再設定自己的樣式 }; } </script> </body> </html>