Comment puis-je mettre à jour le seul élément « actif » de la liste ?

Question

Supposons que vous ayez 4 éléments, un seul d'entre eux peut avoir un nom de classeactive. Les éléments actifs sont mis à jour plusieurs fois par seconde (voici un exemple factice).

Un moyen simple est :

• Supprimer de chaque élémentactive
• Définit active sur l'élément actuellement sélectionné

Le problème est que si l'élément sélectionné n'a pas changé , nous supprimons le nom de la classe et le réinitialisons-le (ce qui peut provoquer des problèmes d'affichage), ce qui n'a aucun sens.

Bien sûr, on pourrait ajouter une autre règle pour ne pas supprimer s'il s'agit toujours d'un élément sélectionné, mais le code deviendrait moins lisible.

Question :

Existe-t-il un mode standard qui peut résoudre ce problème ?

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

Résumé

Il semble donc que vous recherchiez une manière plus élégante d'ajouter et de supprimer une classe active pour un ensemble d'éléments. Au lieu de supprimer la classe active de tous les éléments, puis de la rajouter à l'élément actuellement actif (active类，然后将其添加回当前活动元素（这可能会导致潜在的问题/视觉故障）。而且似乎你正在尝试避免添加太多的代码来检查是否需要删除/添加activecela pourrait provoquer des problèmes potentiels/des problèmes visuels). Et il semble que vous essayiez d'éviter d'ajouter trop de code pour vérifier si la classe active doit être supprimée/ajoutée (si l'élément actif n'a pas changé

).

Solutions potentielles

Personnellement, je ne pense pas que ce soit la meilleure approche (utiliser l'opérateur ternaire pour l'exécution de code peut être compliqué

), mais je pense que le code est assez simple et assez lisible dans l'ensemble.

active类。 add()函数只会在元素当前没有该类时添加类，而remove()函数则相反（仅在类存在时删除类）。这意味着你可以在活动元素上调用add()Fondamentalement, vous pouvez fusionner du code pour ajouter ou supprimer des

fonctions sans vous soucier des problèmes visuels si l'élément actif ne change pas.

En utilisant cette logique, il nous suffit de parcourir tous les éléments possibles, puis en utilisant l'opérateur ternaireadd()（如果活动元素没有更改，这不会有影响），否则调用remove(), nous pouvons vérifier si un élément est l'élément actuellement actif. Si c'est le cas, appelez add() (

Cela n'a aucun effet si l'élément actif n'a pas changé

), sinon appelez 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>

Remarques Cela suppose que vous pouvez parcourir tous les item开头的idéléments actifs

possibles. Dans ce cas, ils ont tous les deux un 🎜. Sans un identifiant qui pourrait être utilisé pour parcourir tous les éléments actifs possibles, il faudrait ajouter davantage de code. 🎜