快捷導(dǎo)航

ES6函數(shù)實(shí)現(xiàn)排它兩種寫法解析

更新時(shí)間：2020年05月13日 14:30:03 作者：陳太浪

這篇文章主要介紹了ES6函數(shù)實(shí)現(xiàn)排它兩種寫法解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

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

html代碼

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

運(yùn)行效果

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

javascript獲取wx.config內(nèi)部字段解決微信分享
這篇文章主要介紹了javascript獲取wx.config內(nèi)部字段解決微信分享,需要的朋友可以參考下
2016-03-03
JavaScript函數(shù)執(zhí)行、作用域鏈以及內(nèi)存管理詳解
這篇文章主要介紹了JavaScript函數(shù)執(zhí)行、作用域鏈以及內(nèi)存管理的知識(shí)，文章內(nèi)容非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-01-01
Layui實(shí)現(xiàn)主窗口和Iframe層參數(shù)傳遞
今天小編就為大家分享一篇Layui實(shí)現(xiàn)主窗口和Iframe層參數(shù)傳遞，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
webpack3.0升級(jí)4.0的方法步驟
這篇文章主要介紹了webpack3.0升級(jí)4.0的方法步驟,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
合并多個(gè)ArrayBuffer場(chǎng)景及方法示例
這篇文章主要為大家介紹了合并多個(gè)ArrayBuffer方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-11-11
JavaScript?中如何攔截全局?Fetch?API?的請(qǐng)求和響應(yīng)問題
在本文中，我們介紹了什么是 JavaScript 攔截器，學(xué)習(xí)了如何通過給 Fetch API 使用猴子補(bǔ)丁和使用 fetch-intercept 庫來創(chuàng)建攔截器，對(duì)js攔截全局Fetch?API的請(qǐng)求和響應(yīng)知識(shí)感興趣的朋友跟隨小編一起看看吧
2023-01-01
JavaScript算法學(xué)習(xí)之冒泡排序和選擇排序
這篇文章主要給大家介紹了關(guān)于JavaScript算法學(xué)習(xí)之冒泡排序和選擇排序的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
JavaScript 學(xué)習(xí)小結(jié)(適合新手參考)
JavaScript常量又稱字面常量，是固化在程序代碼中的信息。變量的主要作用是存取數(shù)據(jù)，提供一個(gè)存取信息的容器。
2009-07-07
前端傳遞參數(shù)時(shí)form-data和json的區(qū)別詳解
前端可以通FormData對(duì)象實(shí)現(xiàn)表單形式提交數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于前端傳遞參數(shù)時(shí)form-data和json區(qū)別的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-11-11
JavaScript實(shí)現(xiàn)基于Cookie的存儲(chǔ)類實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)基于Cookie的存儲(chǔ)類,實(shí)例分析了javascript通過cookie實(shí)現(xiàn)數(shù)據(jù)存儲(chǔ)的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-04-04