如何更新列表中唯一的“活动”项目的方式？

Question

假设你有4个元素，只有其中一个可以有类名active。活动元素每秒更新几次（这里是一个虚拟示例）。

一个简单的方法是：

• 从每个元素中移除active
• 将active设置为当前选择的元素

问题是，如果选择的元素没有改变，我们正在移除类名，并且重新设置它（可能会导致显示故障），这是没有意义的。

当然，我们可以添加另一个规则，如果它仍然是选择的元素，则不要移除，但代码会变得不太易读。

问题：有没有一种标准模式可以解决这个问题？

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);

.active { color: red; }

<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>

Answer 1

总结

所以听起来你正在寻找一种更加优雅的方法来添加和删除一组元素的active类。而不是从所有元素中删除active类，然后将其添加回当前活动元素（这可能会导致潜在的问题/视觉故障）。而且似乎你正在尝试避免添加太多的代码来检查是否需要删除/添加active类（如果活动元素没有更改）。

潜在解决方案

个人而言，我认为这不是最好的方法（使用三元运算符进行代码执行可能会很混乱），但我认为代码足够简单，整体上也相当可读。

基本上，你可以合并代码来添加或删除active类。 add()函数只会在元素当前没有该类时添加类，而remove()函数则相反（仅在类存在时删除类）。这意味着你可以在活动元素上调用add()函数，而不必担心如果活动元素没有更改会导致任何视觉故障。

使用这个逻辑，我们只需要循环遍历所有可能的元素，然后使用三元运算符，我们可以检查一个元素是否是当前活动元素。如果是，调用add()（如果活动元素没有更改，这不会有影响），否则调用remove()。

let i = 0,
    interval;

interval = setInterval(() => {
  i += 1;
  document.querySelectorAll("[id^=item]").forEach(el => (el.id == `item${Math.floor(i / 4)}`) ? el.classList.add("active") : el.classList.remove("active"));
  if(i >= 24) clearInterval(interval);
}, 500);

.active { color: red; }

<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>
<div id="item4">item 4</div>
<div id="item5">item 5</div>
<div id="item6">item 6</div>

注意事项

这假设你可以循环遍历所有可能的活动元素。在这种情况下，它们都有一个以item开头的id。如果没有可以用来循环遍历所有可能活动元素的标识符，那么就需要添加更多的代码。