我有這個代碼：
const all = document.querySelectorAll('div');
let variable = 'fruits';
all.forEach((item) => {
if(item.classList.contains(variable)) {
item.style.backgroundColor = 'red';
}
});<div class="fruits">
Fruits
</div>
<div class="fruits-green">
Green fruits
</div>我想知道是否有部分使用帶有字串/單詞的classList.contains？
顯然，我想要實作的也是獲得水果綠色風格，因為它包含水果綠色
我知道有 CSS 選擇器，但考慮到我的 fruits 變數會隨著其他 JS 函式而改變，我也希望它是 vanilla JS。
非常感謝任何建議。謝謝！
uj5u.com熱心網友回復：
該classList屬性是DOMTokenList一個字串，但具有類似于陣列方法的方法和屬性。
- 遍歷標簽陣列 (
all)。我們將使用.flatMap()，因為我們正在處理可能有或可能沒有多個匹配的多個標簽。all.flatMap((div, idx) => {//... - 接下來，我們將使用其
.value屬性classList回傳每個標簽類的空格分隔字串。let list = div.classList.value.split(' '); - 然后我們將
.filter()通過比較每個標簽的每個類.includes()list.filter(cls => cls.toLowerCase().includes('fruit')); - 最后，回傳一個陣列陣列。每個子陣列都包含一個標簽的匹配類。
const all = Array.from(document.querySelectorAll('div')); let output = all.flatMap((div, idx) => { let list = div.classList.value.split(' '); console.log(list) let matches = list.filter(cls => cls.toLowerCase().includes('fruit')); return [matches]; }) console.log(output);<div class="fruits fries"> Fruits fries </div> <div class="fruits-green fruity"> Green fruits fruit </div>
uj5u.com熱心網友回復：
我能夠使用
let variable = 'fruits';
const all = document.querySelectorAll('div[class*="' variable '"]');
all.forEach((item) => {
item.style.backgroundColor = 'red';
});<div class="fruits">
Fruits
</div>
<div class="fruits-green">
Green fruits
</div>再次感謝@大衛
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/490900.html
標籤：javascript 班级 包含