闭包排他

最新推荐文章于 2019-09-04 21:00:18 发布

今年会更好

最新推荐文章于 2019-09-04 21:00:18 发布

阅读量97

点赞数

文章标签： HTML闭包

本文链接：https://blog.csdn.net/qq_38333377/article/details/94433026

版权

<ul>
    <li ></li>
    <li class="current"></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>
<script>
    window.onload = function () {
        //获取所有的li标签
        var allLis = document.getElementsByTagName('li');
        //method1使用for循环排他思想
        /*
        * 这个方法的弊端就是:消耗很多资源,每次都需要去遍历全部的li才能清除样式*/
        // for (var i = 0 ;i <allLis.length;i++){
        //     //获取单个li,鼠标进入时的效果
        //     allLis[i].onmouseover = function () {
        //         //先将其他没选中的清楚样式
        //         for(var j = 0 ; j<allLis.length;j++){
        //             allLis[j].className ='';
        //         }
        //         this.className = 'current';
        //     }
        // }


        //method2高级的排他,闭包
        var lastOne = 0;//使用一个变量标记current的当前位置,这个是根据li标签中,第一个current的位置来决定的
        for (var i = 0; i < allLis.length; i++) {
            //获取单个li,鼠标进入时的效果
            (function (i) {
                allLis[i].onmouseover = function () {
                    allLis[lastOne].className = '';
                    this.className = 'current';
                    lastOne = i;
                }
            })(i);
        }
    }
</script>

使用闭包的方式实现,多个标签的排他思想方法