更新列表中唯一active项的标准实现模式是什么？

问题背景 #

假设你有4个元素，同一时间只能有一个元素拥有active类，且活跃元素会每秒更新数次。

朴素的实现逻辑是：

• 移除所有元素的active类
• 给当前选中的元素添加active类

但这种方式存在问题：如果选中的元素没有变化，代码依然会重复执行移除和添加类的操作，既无意义，还可能引发显示异常。虽然可以加判断逻辑避免重复操作，但又会降低代码可读性。

那么，有没有实现这类需求的标准模式？

示例代码（朴素实现） #

JavaScript #

var i = 0;

setInterval(() => {
    i += 1;
    document.querySelectorAll('.active').forEach(item => item.classList.remove('active'));
    document.querySelector('#item' + Math.floor(i /4)).classList.add('active');
}, 500);

CSS #

.active { color: red; }

HTML #

<div id="item0" class="active">item 0</div>
<div id="item1">item 1</div>
<div id="item2">item 2</div>
<div id="item3">item 3</div>

标准实现方案 #

方案1：跟踪当前活跃元素（推荐） #

最常用的标准模式是维护一个变量记录当前活跃的元素，每次更新时对比目标元素与当前活跃元素，仅当两者不同时才执行类的修改操作。这种方式既避免了无效DOM操作，代码可读性也不受影响。

let currentActiveElement = document.querySelector('#item0');
let i = 0;

setInterval(() => {
    i += 1;
    const targetId = '#item' + Math.floor(i / 4);
    const targetElement = document.querySelector(targetId);
    
    if (targetElement !== currentActiveElement) {
        currentActiveElement.classList.remove('active');
        targetElement.classList.add('active');
        currentActiveElement = targetElement;
    }
}, 500);

方案2：简洁的条件判断 #

如果不想额外维护变量，可以直接检查目标元素是否已拥有active类，仅在未拥有时才执行全局移除和添加操作，同样能避免无效操作：

let i = 0;

setInterval(() => {
    i += 1;
    const targetElement = document.querySelector('#item' + Math.floor(i / 4));
    
    if (!targetElement.classList.contains('active')) {
        document.querySelectorAll('.active').forEach(item => item.classList.remove('active'));
        targetElement.classList.add('active');
    }
}, 500);

方案3：自定义数据属性标记状态 #

对于更复杂的场景，可以使用自定义数据属性替代类来标记活跃状态，核心逻辑依然是跟踪当前活跃元素：

修改后的CSS

[data-active="true"] { color: red; }

对应JavaScript

let currentActiveElement = document.querySelector('#item0');
currentActiveElement.dataset.active = "true";
let i = 0;

setInterval(() => {
    i += 1;
    const targetElement = document.querySelector('#item' + Math.floor(i / 4));
    
    if (targetElement !== currentActiveElement) {
        currentActiveElement.dataset.active = "false";
        targetElement.dataset.active = "true";
        currentActiveElement = targetElement;
    }
}, 500);

内容的提问来源于stack exchange，提问作者Basj