如何更新清單中唯一的「活動」項目的方式？

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。如果沒有可以用來循環遍歷所有可能活動元素的標識符，那麼就需要增加更多的程式碼。