<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
li{
background-color: #ccc;
border: 1px solid #000;
}
.current{
background-color: orangered;
}
</style>
</head>
<body>
<ul>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
//1.以下是普通排他的做法,因为是用for循环遍历所有li,所以当需要遍历的量大了,效率也就低了
/*window.onload = function () {
var allLis = document.getElementsByTagName('li');
for (var i=0; i<allLis.length; i++){
allLis[i].onmouseover = function () {
for(var j=0; j<allLis.length; j++){
allLis[j].className = '';
}
this.className = 'current';
}
}
}*/
//2.以下是用闭包实现高级排他,没有了遍历所有来清除选中当前的类,仅用闭包实现清除上一个选中的
window.onload = function () {
var allLis = document.getElementsByTagName('li');
var lastOne = 0;
for (var i=0; i<allLis.length; i++){
(function (index) {
allLis[i].onmouseover = function () {
// 清
allLis[lastOne].className = '';
// 设
this.className = 'current';
// 赋值
lastOne = index;
}
})(i);
}
}
</script>
</body>
</html>
用闭包实现高级排他
最新推荐文章于 2021-01-18 15:19:28 发布