ES6前后实现排它的两种写法

排它思想：清除其它所有的没有选中元素的样式, 只设置当前选中元素的样式

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
</head>
<body>
<ul>
    <li class="current">我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
    <li>我是第6个li</li>
    <li>我是第7个li</li>
    <li>我是第8个li</li>
</ul>

</body>
</html>

css代码

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            margin: 100px auto;
            width: 300px;
            height: 400px;
            border: 1px solid #000;
        }
        ul>li{
            font-size: 30px;
            font-weight: bold;
            margin-bottom: 10px;
            cursor: default;
        }

        .current{
            background-color: brown;
        }
    </style>

JavaScript代码

<script>
    /*
    // es6之后的写法
    let items = document.querySelectorAll("li");
    let previousIndex = 0;
    for (let i = 0; i < items.length; i++) {
        // let currentItem = items[i];
        items[i].onclick = function () {
            items[previousIndex].className = "";
            this.className = "current";
            previousIndex = i;
            // console.log(previousIndex);
        };
    }
    */

    // es6之前的写法
    var items = document.querySelectorAll("li");
    var previousIndex = 0;
    for (var i = 0; i < items.length; i++) {
        (function (index) {
            items[index].onclick = function () {
                items[previousIndex].className = "";
                this.className = "current";
                previousIndex = index;
            };
        })(i);
    }
</script>

运行效果

posted @ 2020-04-29 22:13  陈太浪  阅读(353)  评论(0)  编辑  收藏  举报