ES6函數(shù)如何實現(xiàn)排它

發(fā)布時間：2020-07-27 14:40:14 來源：億速云閱讀：136 作者：小豬欄目：web開發(fā)

這篇文章主要為大家展示了ES6函數(shù)如何實現(xiàn)排它，內(nèi)容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。

排它思想：清除其它所有的沒有選中元素的樣式, 只設(shè)置當前選中元素的樣式

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  
</head>
<body>
<ul>
  <li class="current">我是第1個li</li>
  <li>我是第2個li</li>
  <li>我是第3個li</li>
  <li>我是第4個li</li>
  <li>我是第5個li</li>
  <li>我是第6個li</li>
  <li>我是第7個li</li>
  <li>我是第8個li</li>
</ul>

</body>
</html>

css代碼

<style>
    *{
      margin: 0;
      padding: 0;
    }
    ul{
      list-style: none;
      margin: 100px auto;
      width: 300px;
      height: 400px;
      border: 1px solid #000;
    }
    ul>li{
      font-size: 30px;
      font-weight: bold;
      margin-bottom: 10px;
      cursor: default;
    }

    .current{
      background-color: brown;
    }
  </style>

JavaScript代碼

<script>
  /*
  // es6之后的寫法
  let items = document.querySelectorAll("li");
  let previousIndex = 0;
  for (let i = 0; i < items.length; i++) {
    // let currentItem = items[i];
    items[i].onclick = function () {
      items[previousIndex].className = "";
      this.className = "current";
      previousIndex = i;
      // console.log(previousIndex);
    };
  }
  */

  // es6之前的寫法
  var items = document.querySelectorAll("li");
  var previousIndex = 0;
  for (var i = 0; i < items.length; i++) {
    (function (index) {
      items[index].onclick = function () {
        items[previousIndex].className = "";
        this.className = "current";
        previousIndex = index;
      };
    })(i);
  }
</script>

運行效果

ES6函數(shù)如何實現(xiàn)排它

以上就是關(guān)于ES6函數(shù)如何實現(xiàn)排它的內(nèi)容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。

向AI問一下細節(jié)

ES6函數(shù)如何實現(xiàn)排它

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽