欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2020年05月13日 14:30:03   作者：陳太浪  
這篇文章主要介紹了ES6函數(shù)實現(xiàn)排它兩種寫法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

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

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>

運行效果

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

相關(guān)文章

  • TypeScript聲明文件的語法與場景詳解

    TypeScript聲明文件的語法與場景詳解

    使用ts進行開發(fā)的時候,不可避免的需要引用第三方的 JS 的庫,但是默認(rèn)情況下TS是不認(rèn)識我們引入的這些JS庫的,所以在使用這些JS庫的時候,我們就要通過聲明文件告訴TS它是什么,這篇文章主要給大家介紹了關(guān)于TypeScript聲明文件的相關(guān)資料,需要的朋友可以參考下
    2022-05-05
  • 微信小游戲中three.js離屏畫布的示例代碼

    微信小游戲中three.js離屏畫布的示例代碼

    這篇文章主要介紹了微信小游戲中three.js離屏畫布的示例代碼,主要是用three.js結(jié)合cannon.js寫個3D小游戲，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
    2020-10-10
  • 小程序?qū)崿F(xiàn)自定義導(dǎo)航欄適配完美版

    小程序?qū)崿F(xiàn)自定義導(dǎo)航欄適配完美版

    這篇文章主要介紹了小程序?qū)崿F(xiàn)自定義導(dǎo)航欄適配完美版，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • 基于JS實現(xiàn)仿百度百家主頁的輪播圖效果

    基于JS實現(xiàn)仿百度百家主頁的輪播圖效果

    本文給大家分享基于html和js實現(xiàn)的仿百度百家主頁的輪播圖效果，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下
    2017-03-03
  • JS event使用方法詳解

    JS event使用方法詳解

    event代表事件的狀態(tài)，例如觸發(fā)event對象的元素、鼠標(biāo)的位置及狀態(tài)、按下的鍵等等。 event對象只在事件發(fā)生的過程中才有效。
    2008-04-04
  • JavaScript實現(xiàn)twitter puddles算法實例

    JavaScript實現(xiàn)twitter puddles算法實例

    這篇文章主要介紹了JavaScript實現(xiàn)twitter puddles算法實例,本文源自twitter的一道面試題,本文使用js解開了這首題,需要的朋友可以參考下
    2014-12-12
  • JS實現(xiàn)給對象動態(tài)添加屬性的方法

    JS實現(xiàn)給對象動態(tài)添加屬性的方法

    這篇文章主要介紹了JS實現(xiàn)給對象動態(tài)添加屬性的方法,涉及JS屬性的遍歷、動態(tài)賦值及eval方法的簡單使用技巧,需要的朋友可以參考下
    2017-01-01
  • layer父頁獲取彈出層輸入框里面的值方法

    layer父頁獲取彈出層輸入框里面的值方法

    今天小編就為大家分享一篇layer父頁獲取彈出層輸入框里面的值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • js實現(xiàn)石頭剪刀布游戲

    js實現(xiàn)石頭剪刀布游戲

    這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)石頭剪刀布游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-10-10
  • ajax如何實現(xiàn)頁面局部跳轉(zhuǎn)與結(jié)果返回

    ajax如何實現(xiàn)頁面局部跳轉(zhuǎn)與結(jié)果返回

    AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)，通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新，本篇文章給大家介紹ajax如何實現(xiàn)頁面局部跳轉(zhuǎn)與結(jié)果返回，感興趣的朋友一起來學(xué)習(xí)
    2015-08-08

最新評論