我有一个click事件，它将一个活动类添加到链接的parentNode。单击时，应从parentNode的兄弟节点中删除活动类。这是到目前为止的代码：
categories = document.querySelectorAll('.categories');
for(var i = 0; i < categories.length; i++) {
categories[i].onclick = function(e) {
// ('.categoriesparent').classList.remove('active');
this.parentNode.classList.add('active');
}我尝试了注释掉的行，这打破了点击时添加的类。有没有相当于jQuery的兄弟姐妹（）.removeClass（'active'）？谢谢你的帮助。
以下是此部分的DOM：
<div id="nav">
<span class="categoriesparent active">
<a class="categories">Link</a>
</span>
<span class="categoriesparent">
<a class="categories">Link2</a>
</span>
</div>更新 - 这是原始的完整代码段：
<html>
<head></head>
<body>
<div id="nav">
<span class="categoriesparent">
<a href="#" class="categories">Link</a>
</span>
<br><br>
<span class="categoriesparent">
<a href="#" class="categories">Link2</a>
</span>
</div>
<script>
categories = document.querySelectorAll('.categories');
for(var i = 0; i < categories.length; i++) {
categories[i].onclick = function(e) {
// ('.categoriesparent').classList.remove('active');
this.parentNode.classList.add('active');
}
}
</script>
</body>
</html>合并BRK的代码片段后更新：
<html>
<head></head>
<body>
<div id="nav">
<span class="categoriesparent active">
<a href="#" class="categories">Link</a>
</span>
<br><br>
<span class="categoriesparent">
<a href="#" class="categories">Link2</a>
</span>
</div>
<script>
categories = document.querySelectorAll('.categories');
categories.forEach(function(cat, index) {
cat.onclick = function(e) {
document.querySelector('.categoriesparent.active').classList.remove('active');
this.parentNode.classList.add('active');
}
});
</script>
</body>
</html>你能尝试这样做吗？它可能有帮助！
categories = document.querySelectorAll('.categories');
for(let i = 0; i < categories.length; i++) {
categories[i].onclick = () => {
// ('.categoriesparent').classList.remove('active');
this.parentNode.classList.add('active');
}
您可以先从父母的所有兄弟姐妹（和父母本身）中删除active类，然后将add删除到父母
for (var i = 0; i < categories.length; i++) {
categories[i].onclick = function(e) {
[ ...getSiblingsAndMe(this.parentNode) ].forEach( el => el.classList.remove( 'active' ) );
this.parentNode.classList.add('active');
}
}
function getSiblingsAndMe( el )
{
return el.parentNode.children;
}
演示
categories = document.querySelectorAll('.categories');
for (var i = 0; i < categories.length; i++) {
categories[i].onclick = function(e) {
[ ...getSiblingsAndMe(this.parentNode) ].forEach( el => el.classList.remove( 'active' ) );
this.parentNode.classList.add('active');
}
}
function getSiblingsAndMe( el )
{
return el.parentNode.children;
}.categoriesparent
{
display:block;
}
.active
{
background-color:pink;
}<div id="nav">
<span class="categoriesparent active">
<a class="categories">Link</a>
</span>
<span class="categoriesparent">
<a class="categories">Link2</a>
</span>
</div>在onclick处理程序中，您可以再次使用document.querySelector（'。categoriesparent.active'）。这将返回第一个匹配的元素，然后使用classList.remove从中删除active类。
this.parentNode指的是上下文中的元素
var categories = document.querySelectorAll('.categories');
categories.forEach(function(cat, index) {
cat.onclick = function(e) {
document.querySelector('.categoriesparent.active').classList.remove('active')
this.parentNode.classList.add('active');
}
}).active {
color: red;
}<div id="nav">
<span class="categoriesparent active">
<a class="categories">Link</a>
</span>
<span class="categoriesparent">
<a class="categories">Link2</a>
</span>
</div>来自Jamie的更新：
我这样使用你的建议：
<html>
<head></head>
<body>
<div id="nav">
<span class="categoriesparent active">
<a href="#" class="categories">Link</a>
</span>
<br><br>
<span class="categoriesparent">
<a href="#" class="categories">Link2</a>
</span>
</div>
<script>
categories = document.querySelectorAll('.categories');
categories.forEach(function(cat, index) {
cat.onclick = function(e) {
document.querySelector('.categoriesparent.active').classList.remove('active');
this.parentNode.classList.add('active');
}
});
</script>
</body>
</html>我得到一个“未捕获的TypeError：undefined不是函数”错误。感谢您的输入！