JS面向对象闭包应用：高级排他

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        li {
            border: 1px solid #000;
            background-color: #ccc;
            cursor: pointer;
        }

        .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>
        <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.addEventListener("load", function () {
            var allLis = document.getElementsByTagName("li");
            // 记录移动前选中li对应的索引
            var liIndex = 0;
            for (var i = 0; i < allLis.length; i++) {
                (function (i) {
                    var li = allLis[i];
                    li.addEventListener("mouseover", function () {
                        // 清除
                        allLis[liIndex].className = "";
                        // 设置
                        this.className = "current";
                        // 赋值
                        liIndex = i;
                    });
                })(i);
            }
        });
    </script>
</body>

</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。