第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

JavasSript（無 jQuery）查找多個類并向每個類添加新類

JavasSript（無 jQuery）查找多個類并向每個類添加新類

ITMISS 2023-03-24 17:12:18
我可以找到使用 jQuery 的示例，但找不到如何在純 JavaScript 中執(zhí)行此操作的答案。是否可以使用 JavaScript 將這兩個類循環(huán)組合起來以簡化代碼。我將為我正在進行的項目完成大約 20 節(jié)課。var srtClass1 = document.getElementsByClassName('class1');for(var i = 0; i < srtClass1.length; i++) {    srtClass1[i].classList.add('newClass');    srtClass1[i].classList.remove('class1');}var srtClass2 = document.getElementsByClassName('class2');for(var i = 0; i < srtClass2.length; i++) {    srtClass2[i].classList.add('newClass');    srtClass2[i].classList.remove('class2');}
查看完整描述

3 回答

?
慕尼黑8549860

TA貢獻1818條經(jīng)驗 獲得超11個贊

你可以嘗試這樣的事情。您只需要用要刪除的所有類填充數(shù)組。


var classes = ['.class1', '.class2', '.class3'];

var elements = document.querySelectorAll(classes.join(','));


for (let element of elements) {

  element.classList.add('newClass');

    

  for (let className in classes) {

    element.classList.remove(className);    

  }

}

.box { 

  display: block;

  width: 100%;

  height: 20px;

  margin: 0 0 20px 0;

}


.class1 { background: red; }

.class2 { background: green; }

.class3 { background: blue; }


.newClass { background: yellow; }

<div class="box class1"></div>

<div class="box class2"></div>

<div class="box class3"></div>


查看完整回答
反對 回復(fù) 2023-03-24
?
慕工程0101907

TA貢獻1887條經(jīng)驗 獲得超5個贊

您可以合并 2 個集合：


var srtClass1 = [...document.getElementsByClassName('class1'), ...document.getElementsByClassName('class2')];

for(var i = 0; i < srtClass1.length; i++) {

    srtClass1[i].classList.add('newClass');

    srtClass1[i].classList.remove('class1');

    srtClass1[i].classList.remove('class2');

}

你可以使用高階函數(shù)：


[...document.getElementsByClassName('class1'), ...document.getElementsByClassName('class2')].forEach( el => {

    el.classList.add('newClass');

    el.classList.remove('class1');

    el.classList.remove('class2');

});

甚至更好（因為classList.remove支持多個參數(shù)）：


[...document.getElementsByClassName('class1'), ...document.getElementsByClassName('class2')].forEach( el => {

    el.classList.add('newClass');

    el.classList.remove('class1', 'class2');

});

或者，如果您愿意，可以使用querySelectorAll：


document.querySelectorAll('.class1, .class2').forEach(el => {

    el.classList.add('newClass');

    el.classList.remove('class1', 'class2');

});


查看完整回答
反對 回復(fù) 2023-03-24
?
牛魔王的故事

TA貢獻1830條經(jīng)驗 獲得超3個贊

也許嘗試制作一個類列表，然后迭代它：


function changeClasses() {

  let classNames = ['class1', 'class2'];


  classNames.forEach(className => {

    const node = document.querySelector(`.${className}`);

    

    if (node != null) {

      node.classList.add('newClass');

      node.classList.remove(className);

    }

  });

}

.class1 {

  color: green;

}


.class2 {

  color: blue;

}


.newClass {

  color: red;

}

<body>

  <div class="class1">class1</div>

  <div class="class2">class2</div>

  

  <button onclick="changeClasses()">Change classes</button>

</body>


查看完整回答
反對 回復(fù) 2023-03-24
  • 3 回答
  • 0 關(guān)注
  • 177 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號