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

程序员文章站 2022-06-27 22:39:01

排它思想：清除其它所有的没有选中元素的样式, 只设置当前选中元素的样式 html代码 css代码 JavaScript代码运行效果 ......

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

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>

运行效果

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

上一篇： XPath Helper的安装使用

下一篇： 1.图解HTTP-了解Web及网络基础