我正在为一个元素添加一个类,并希望将其从兄弟姐妹中删除。在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';
};
答案 0 :(得分:5)
您可以使用循环内部单击事件从所有元素中删除manifest.yml
类,然后再次将其设置为单击元素。
active
&#13;
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';
};
}
&#13;
.active {
color: red;
}
&#13;
答案 1 :(得分:4)
从同级中移除一个类
var el = document.getElementById( "two" );
var one = el.previousSibling();
one.classList.remove("active");
使用previousSibling或nextSibling遍历它,并使用classList.remove删除一个类。
答案 2 :(得分: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)
,以避免抱怨数组从一行开始(尽管我不确定为什么这样做)。
答案 3 :(得分:0)
从元素兄弟中删除一个类
let elem = document.getElementById('id');
let siblings = elem.parentElement.children;
for(let sib of siblings) {
sib.classList.remove('active')
}