1. 程式人生 > 其它 >排他思想(演算法)

排他思想(演算法)

如果有同一組元素,我們想要某一個元素實現某種樣式,需要用到迴圈的排他思想:

  1. 所有的元素全部清除(首先排除其他人,再設定自己的樣式)
  2. 給當前的元素設定樣式
<!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>