javascript - 如何从没有 JQuery 的元素的 sibling 中删除类？

Question

我正在向一个元素添加一个类，并希望将其从 sibling 中删除。在 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>