假設(shè)你有4個(gè)元素，只有其中一個(gè)可以有類別名稱active#?；顒?dòng)元素每秒更新幾次（這裡有一個(gè)虛擬範(fàn)例）。
一個(gè)簡(jiǎn)單的方法是：
activeactive設(shè)定為目前選擇的元素問題是，如果選擇的元素沒有改變，我們正在移除類別名，並且重新設(shè)定它（可能會(huì)導(dǎo)致顯示故障），這是沒有意義的。
當(dāng)然，我們可以添加另一個(gè)規(guī)則，如果它仍然是選擇的元素，請(qǐng)不要移除，但程式碼會(huì)變得不太易讀。
問題：有沒有一種標(biāo)準(zhǔn)模式可以解決這個(gè)問題？
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>
1
0
0
所以聽起來你正在尋找一種更優(yōu)雅的方法來添加和刪除一組元素的active類別。而不是從所有元素中刪除active類，然後將其添加回當(dāng)前活動(dòng)元素（這可能會(huì)導(dǎo)致潛在的問題/視覺故障）。而且似乎你正在嘗試避免添加太多的程式碼來檢查是否需要?jiǎng)h除/添加active類別（如果活動(dòng)元素沒有更改）。
個(gè)人而言，我認(rèn)為這不是最好的方法（使用三元運(yùn)算子進(jìn)行程式碼執(zhí)行可能會(huì)很混亂），但我認(rèn)為程式碼足夠簡(jiǎn)單，整體上也相當(dāng)可讀。
基本上，你可以合併程式碼來新增或刪除active類別。 add()函數(shù)只會(huì)在元素目前沒有該類別時(shí)添加類，而remove()函數(shù)則相反（僅在類別存在時(shí)刪除類別）。這意味著你可以在活動(dòng)元素上呼叫add()函數(shù)，而不必?fù)?dān)心如果活動(dòng)元素沒有改變會(huì)導(dǎo)致任何視覺故障。
使用這個(gè)邏輯，我們只需要循環(huán)遍歷所有可能的元素，然後使用三元運(yùn)算符，我們可以檢查一個(gè)元素是否是當(dāng)前活動(dòng)元素。如果是，請(qǐng)呼叫add()（如果活動(dòng)元素沒有更改，這不會(huì)有影響），否則呼叫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>
這假設(shè)你可以循環(huán)遍歷所有可能的活動(dòng)元素。在這種情況下，它們都有一個(gè)以item開頭的id。如果沒有可以用來循環(huán)遍歷所有可能活動(dòng)元素的標(biāo)識(shí)符，那麼就需要增加更多的程式碼。
