当前位置： 移动技术网 > IT编程>开发语言>JavaScript > ES6前后实现排它的两种写法

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

2020年04月30日  | 移动技术网IT编程  | 我要评论

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

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>

运行效果

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网