如何在沒有 JQuery 的情況下從元素的兄弟元素中刪除類？

Question

我正在向元素添加一個類，並希望將其從兄弟姐妹中刪除。 在 JQuery 中它很簡單，但是如何在純 JS 中以最佳方式做到這一點？ 這是我的代碼示例。

<div class="controllers">
  <span id='one' class='active'></span>
  <span id='two'></span>
  <span id='three'></span>
</div>

firstBtn.onclick = function() {
  slides[0].className = 'slide active';
  this.className = 'active';
};

Answer 1

您可以在單擊事件中使用循環從所有元素中刪除active類，然后再次將其設置在單擊的元素上。

 var el = document.querySelectorAll('.controllers span'); for (let i = 0; i < el.length; i++) { el[i].onclick = function() { var c = 0; while (c < el.length) { el[c++].className = 'slide'; } el[i].className = 'slide active'; }; }

 .active { color: red; }

 <div class="controllers"> <span id='one' class='active'>Lorem</span> <span id='two'>Lorem</span> <span id='three'>Lorem</span> </div>

Answer 2

僅設置一個活動元素的通用函數是：

const setActive = el => {
    [...el.parentElement.children].forEach(sib => sib.classList.remove('active'))
    el.classList.add('active')
    }

在你的例子中：

let spans = [...document.body.querySelectorAll('.controllers > span')]
spans.forEach(el => el.addEventListener('click', e => setActive(el)))

小提琴： https : //jsfiddle.net/9j1qguac/

在嚴格模式下，您應該將[...el.parentElement.children]切換到Array.from(el.parentElement.children)以避免對數組開始一行的抱怨（盡管我不確定為什么會有幫助）。

Answer 3

從兄弟中刪除一個類

var el = document.getElementById( "two" );
var one = el.previousSibling();
one.classList.remove("active");

使用previousSibling或nextSibling遍歷它，並使用classList.remove刪除一個類。

Answer 4

從元素兄弟中刪除一個類

let elem = document.getElementById('id');
let siblings = elem.parentElement.children;
  for(let sib of siblings) {
      sib.classList.remove('active')
      }