假設你有4個元素，只有其中一個可以有類別名稱active#。活動元素每秒更新幾次（這裡有一個虛擬範例）。
一個簡單的方法是：
activeactive設定為目前選擇的元素問題是，如果選擇的元素沒有改變，我們正在移除類別名，並且重新設定它（可能會導致顯示故障），這是沒有意義的。
當然，我們可以添加另一個規則，如果它仍然是選擇的元素，請不要移除，但程式碼會變得不太易讀。
問題：有沒有一種標準模式可以解決這個問題？
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>
總結
所以聽起來你正在尋找一種更優雅的方法來添加和刪除一組元素的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; }注意事項
這假設你可以循環遍歷所有可能的活動元素。在這種情況下，它們都有一個以
item開頭的id。如果沒有可以用來循環遍歷所有可能活動元素的標識符，那麼就需要增加更多的程式碼。