我有一个点击事件,它将一个活动的类添加到链接的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');
}
&#13;
我尝试了注释掉的行,这打破了点击时添加的类。有没有相当于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>
&#13;
更新 - 这是原始的完整代码段:
<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>
&#13;
在合并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>
&#13;
答案 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');
}
})
&#13;
.active {
color: red;
}
&#13;
<div id="nav">
<span class="categoriesparent active">
<a class="categories">Link</a>
</span>
<span class="categoriesparent">
<a class="categories">Link2</a>
</span>
</div>
&#13;
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>
&#13;
我得到一个&#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;
}
&#13;
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;
}
&#13;
.categoriesparent
{
display:block;
}
.active
{
background-color:pink;
}
&#13;