Wie kann ich das einzige „aktive“ Element in der Liste aktualisieren?

Question

Angenommen, Sie haben 4 Elemente, von denen nur eines einen Klassennamen haben kannactive. Aktive Elemente werden mehrmals pro Sekunde aktualisiert (hier ein Dummy-Beispiel).

Ein einfacher Weg ist:

• Von jedem Element entfernenactive
• Setzt active auf das aktuell ausgewählte Element

Das Problem besteht darin, dass wir, wenn sich das ausgewählte Element nicht geändert hat , den Klassennamen entfernen und ihn zurücksetzen (was möglicherweise zu Anzeigestörungen führt), was keinen Sinn ergibt.

Natürlich könnten wir eine weitere Regel hinzufügen, die besagt, dass das Element nicht entfernt wird, wenn es noch ein ausgewähltes Element ist, aber der Code würde dadurch schlechter lesbar werden.

Frage: Gibt es einen Standardmodus, der dieses Problem lösen kann?

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。如果没有可以用来循环遍历所有可能活动元素的标识符，那么就需要添加更多的代码。