我有一个点击事件，它将一个活动的类添加到链接的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（＆＃39; active＆＃39;）？谢谢你的帮助。
以下是此部分的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>
答案 0 :(得分：0)
categories = document.querySelectorAll('.categories');
for(let i = 0; i < categories.length; i++) {
categories[i].onclick = () => {
// ('.categoriesparent').classList.remove('active');
this.parentNode.classList.add('active');
}
答案 1 :(得分：0)
在onclick处理程序中，您可以再次使用document.querySelector（＆＃39; .categoriesparent.active＆＃39;）。这将返回第一个匹配的元素，然后使用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>
我得到一个＆＃34;未捕获的TypeError：undefined不是一个函数＆＃34;错误。感谢您的投入！
答案 2 :(得分：0)
您可以先从父的所有兄弟姐妹<和父亲本身中删除 active类，然后{ {1}}到父级
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;
}