用闭包实现高级排他

来源：互联网发布：淘宝负责人电话号码编辑：程序博客网时间：2024/06/05 02:03
<!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>
0 0