js閉包實現排他思想
目標:
實現滑鼠移動到li上的時候,新增背景色,移出的時候,背景色消失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
width: 100%;
height: 20px;
border: 1px solid #000;
}
.current{
background-color: orangered;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
<script>
var allLis = document.getElementsByTagName('li');
var lastOne = 0;
for(var i=0;i<allLis.length;i++){
(function (index) {
allLis[index].onmouseover = function () {
allLis[lastOne].className = '';
this.className = "current";
lastOne = index;
}
})(i);
}
</script>
相關文章
- js閉包例子—對不同物件實現點贊累加JS物件
- Go 閉包的實現Go
- JS閉包ClosureJS
- js--閉包JS
- js-閉包JS
- 美麗的閉包,在js中實現函式過載JS函式
- 徹底理解閉包實現原理
- js函式閉包JS函式
- js閉包的理解JS
- 淺談js閉包JS
- js中的閉包JS
- js閉包測試JS
- 【JavaSE】java實現閉包與回撥Java
- Javascript閉包深入解析及實現方法JavaScript
- 對JS閉包的理解JS
- JS中的 閉包(Closure)JS
- JS進擊之路:閉包JS
- JS作用域與閉包JS
- JS閉包作用域解析JS
- 深入理解JS閉包JS
- [JS]什麼是閉包?JS
- js閉包面試題目JS面試題
- js閉包,圓形,物件JS物件
- js學習六-閉包JS
- JS閉包函式概念JS函式
- 【譯】JavaScript進階 從實現理解閉包JavaScript
- JS閉包的簡易使用JS
- js閉包簡單總結JS
- [JS]閉包和詞法環境JS
- [譯]理解JS中的閉包JS
- JS-閉包(closure)的理解JS
- JS 奧義解析(4):閉包JS
- Unity 揹包系統的完整實現(基於MVC框架思想)UnityMVC框架
- 在 Swift 中使用閉包實現懶載入Swift
- Python原始碼閱讀-閉包的實現Python原始碼
- Java程式設計思想中關於閉包的一個例子Java程式設計
- 深入學習js之——閉包#8JS
- 【JS基礎】作用域和閉包JS