ES6函數(shù)實現(xiàn)排它兩種寫法解析
更新時間：2020年05月13日 14:30:03 作者：陳太浪
這篇文章主要介紹了ES6函數(shù)實現(xiàn)排它兩種寫法解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
排它思想：清除其它所有的沒有選中元素的樣式, 只設置當前選中元素的樣式
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>
運行效果
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
使用ts進行開發(fā)的時候,不可避免的需要引用第三方的 JS 的庫,但是默認情況下TS是不認識我們引入的這些JS庫的,所以在使用這些JS庫的時候,我們就要通過聲明文件告訴TS它是什么,這篇文章主要給大家介紹了關于TypeScript聲明文件的相關資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了微信小游戲中three.js離屏畫布的示例代碼,主要是用three.js結合cannon.js寫個3D小游戲，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2020-10-10
這篇文章主要介紹了小程序實現(xiàn)自定義導航欄適配完美版，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
本文給大家分享基于html和js實現(xiàn)的仿百度百家主頁的輪播圖效果，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-03-03
event代表事件的狀態(tài)，例如觸發(fā)event對象的元素、鼠標的位置及狀態(tài)、按下的鍵等等。 event對象只在事件發(fā)生的過程中才有效。2008-04-04
JavaScript實現(xiàn)twitter puddles算法實例
這篇文章主要介紹了JavaScript實現(xiàn)twitter puddles算法實例,本文源自twitter的一道面試題,本文使用js解開了這首題,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了JS實現(xiàn)給對象動態(tài)添加屬性的方法,涉及JS屬性的遍歷、動態(tài)賦值及eval方法的簡單使用技巧,需要的朋友可以參考下2017-01-01
今天小編就為大家分享一篇layer父頁獲取彈出層輸入框里面的值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細介紹了js實現(xiàn)石頭剪刀布游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網頁應用的網頁開發(fā)技術，通過在后臺與服務器進行少量數(shù)據(jù)交換，AJAX 可以使網頁實現(xiàn)異步更新，本篇文章給大家介紹ajax如何實現(xiàn)頁面局部跳轉與結果返回，感興趣的朋友一起來學習2015-08-08