排他思想详解

核心思路一

1. 获取目标元素，得到一个存储元素对象数的组；
2. 我们先把所有目标元素的指定样式初始化 （干掉所有人）；
3. 再重新给指定的元素对象添加自己想要的样式（留下我自己）；

这种写法有个致命的缺点，就是每次运行此代码都会遍历一次数组，去掉每个元素的样式（包括自己），然后再给指定的元素添加样式，浏览器的重复执行了很多任务，代码运行效率不高。

示例：

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

<script>
    // 1. 获取所有按钮元素，btns得到的是伪数组  里面的每一个元素 btns[i]
    let btns = document.getElementsByTagName('button');
    // 给每个元素添加点击事件
    for (let i = 0; i < btns.length; i++) {
        btns[i].onclick = function() {
            // 2. 我们先把所有的按钮背景颜色去掉  干掉所有人
            for (let j = 0; j < btns.length; j++) {
                btns[j].style.backgroundColor = '';
            }
            // 3. 然后才让当前的元素背景颜色为pink 留下我自己
            this.style.backgroundColor = 'pink';
        }
    }
</script>

核心思路二：

遍历每一个目标元素，判断这个元素与 this 是不是同一个；是则修改样式，不是则初始化样式。

//  获取所有按钮元素，btns得到的是伪数组  里面的每一个元素 btns[i]
let btns = document.getElementsByTagName('button');
// 给每个元素添加点击事件
for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = function() {
        for (let j = 0; j < btns.length; j++) {
            // 判断当前元素是否被点击
            if (btns[j] === this) {
                // 是则修改样式
                this.style.backgroundColor = 'skyblue';
            } else {
                // 不是则初始化样式
                btns[j].style.backgroundColor = '';
            }
        }
    }
}

第二种排他思想跟只是增加了 if 判断；判断是自己就修改样式，不是自己就设置默认样式，但是大大提高了代码效率。

另一种情况

目标元素中，有一个元素默认被选中

1. 找到默认被选中的元素，将其 用于选中 的类名移除
2. 给当前被选中的元素添加 用于选中 的类名

<div class="tab">
    <button class="tab-item active">按钮1</button>
    <button class="tab-item">按钮2</button>
    <button class="tab-item">按钮3</button>
    <button class="tab-item">按钮4</button>
    <button class="tab-item">按钮5</button>
</div>

.active {
    color: red;
    font-size: 24px;
    background-color: skyblue;
}

//  获取 .tab 下的所有 .tab-item 元素
let tabS = document.querySelectorAll('.tab .tab-item');

// 给每个 .tab-item 添加点击事件
for (let i = 0; i < tabS.length; i++) {
    tabS[i].addEventListener('click', function() {
        // 找到 tab栏 中第一个 .active 将其删除
        document.querySelector('.tab .active').classList.remove('active');
        // 给当前被点击的元素添加 .active
        this.classList.add('active');
    });
}