如何在没有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

您可以使用click事件内的循环active从所有元素中删除类，然后在clicked元素上再次进行设置。

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)以避免抱怨数组开始一行（尽管我不确定为什么会有帮助）。