什么是排他思想？

更新時(shí)間:2022-07-01 來(lái)源:黑馬程序員瀏覽量:

IT培訓(xùn)班

排他思想簡(jiǎn)單理解就是排除掉其他的(包括自己)外后再蛤自己設(shè)置想要實(shí)觀的效果。總而言之指排他思想的實(shí)現(xiàn)步驟就是所有元素全都清除與設(shè)置當(dāng)前元素，例知，在開發(fā)中，如果有同一組元素，我們想要某一個(gè)元素實(shí)現(xiàn)某種樣式，這就需要用到循環(huán)的持他思想算法來(lái)實(shí)現(xiàn)。接下來(lái)我們通過(guò)案例的形式演示排他操作。

(1)編寫HTML結(jié)構(gòu)代碼，示例代碼如下。

<body>
  <button>按鈕1</botton>
  <button>按鈕2</botton>
  <button>按鈕3</botton>
  <button>按鈕4</botton>
  <botton>按鈕5</botton>
</body>

(2)編寫JavaScript代碼，實(shí)現(xiàn)單擊按鈕，改變當(dāng)前按鈕背景色效果，示例代碼如下。

< seript >
    //獲取所有按鈕元素
    var btns = docunent.getElementsByTagName('button');
    //btns得到的是類數(shù)組對(duì)象，使用btns[i]訪問數(shù)組里的每一個(gè)元素
    for (var i = 0; i < btns.length; i++) {
      btns[i].onclick = function() {
        //（1）先把所有的按鈕背景顏色去掉
        for (var i = 0; i < btns.length; i++) {
          btns[i].style.backgroundColor = ' ';
        }
        //（2）然后設(shè)置當(dāng)前的元素背景顏色
        this.style.backgroundColor = 'pink';
    }
 } 
< /script>

上述代碼中，第3行代碼獲取所有按鈕元素，存儲(chǔ)在btns偽數(shù)組中。第5~14行代碼使用for循環(huán)遍歷偽數(shù)組中的每一個(gè)元素btnslil。第6行代碼給每一個(gè)元素添加單擊事件。第8~10行代碼利用for循環(huán)首先把所有的按鈕背景顏色去掉，然后在第12行給當(dāng)前的元素設(shè)置背景顏色為pink。預(yù)覽效果如圖所示。

1656669198540_排他思想.png