用闭包实现高级排他

最新推荐文章于 2020-07-01 10:43:48 发布

Chaney__Chen

最新推荐文章于 2020-07-01 10:43:48 发布

阅读量482

点赞数

分类专栏： web前端文章标签：闭包排他思想 javascript 前端开发

本文链接：https://blog.csdn.net/Chaney__Chen/article/details/53767852

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏


<!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>

Chaney__Chen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用闭包实现高级排他

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> li{ background-color: #ccc; border: 1px solid #000; } .current{
复制链接

扫一扫