排他排他操作指清除其它非选中元素的样式, 只设置当前选中元素样式. 点击事件中有频繁的用到排他.

排他

什么是排他

排他操作指清除其它非选中元素的样式, 只设置当前选中元素样式.

点击事件中有频繁的用到排他.

拙劣的排他

for 一把梭清掉样式再给指定 dom 节点添加样式, 次次都遍历, 效率属实不行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>25-JavaScript-排它思想</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 400px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        .current{
            background: red;
        }
    </style>
</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>
</ul>
<script>
    for(let i = 0; i < oItems.length; i++){
        let item = oItems[i];
        item.onclick = function () {
            
            for(let j = 0; j < oItems.length; j++){
                let li = oItems[j];
                li.className = "";
            }

            this.className = "current";
        }
    }
</script>
</body>
</html>

正经的排他

通过每次存上次被渲染的元素的索引, 每次更新只需清空指定元素的样式, 精确打击省子弹

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>25-JavaScript-排它思想</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 400px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        .current{
            background: red;
        }
    </style>
</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>
</ul>
<script>
    let oItems = document.querySelectorAll("li");
    let previousIndex = 0;

    for(let i = 0; i < oItems.length; i++){
        let item = oItems[i];
        item.onclick = function () {
            // 排它
            let preItem = oItems[previousIndex];
            preItem.className = "";

            this.className = "current";
            
            // 更新当前选中节点的索引
            previousIndex = i;
        }
    }
</script>
</body>
</html>

通过 event.target 做排他

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>25-JavaScript-排它思想</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 400px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        .current{
            background: red;
        }
    </style>
</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>
</ul>
<script>
    let oUl = document.querySelector("ul");
    let oLi = document.querySelector(".selected");
    oUl.onclick = function (event) {
        event = event || window.event;
        // console.log(event.target); // 好鬼酷啊！！！
        oLi.className = "";
        let item = event.target;
        item.className = "selected";
        oLi = item;
    }
</script>
</body>
</html>

ES6 以前的正经排他

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>25-JavaScript-排它思想</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 400px;
            border: 1px solid #000;
            margin: 100px auto;
        }
        .current{
            background: red;
        }
    </style>
</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>
</ul>
<script>
    let oItems = document.querySelectorAll("li");
    let previousIndex = 0;

    for(var i = 0; i < oItems.length; i++) {
        var item = oItems[i];
        
        // 通过带参的立即执行函数实现排他
        (function (index) {
            item.onclick = function () {
                // 排它
                var preItem = oItems[previousIndex];
                preItem.className = "";

                this.className = "current";
                previousIndex = index;
            }
        })(i);
    }
</script>
</body>
</html>