原始javascript:将类添加到parentNode并从兄弟姐妹中删除

时间:2018-03-05 06:14:21

标签: javascript siblings parent-node

我有一个点击事件,它将一个活动的类添加到链接的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;
&#13;
&#13;

我尝试了注释掉的行,这打破了点击时添加的类。有没有相当于jQuery的兄弟姐妹().removeClass(&#39; active&#39;)?谢谢你的帮助。

以下是此部分的DOM:

&#13;
&#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;
&#13;
&#13;

更新 - 这是原始的完整代码段:

&#13;
&#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;
&#13;
&#13;

在合并BRK的代码片段后进行更新:

&#13;
&#13;
<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;
&#13;
&#13;

3 个答案:

答案 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指的是上下文中的元素

&#13;
&#13;
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;
&#13;
&#13;

Jamie的更新:

我使用了你的建议:

&#13;
&#13;
<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;
&#13;
&#13;

我得到一个&#34;未捕获的TypeError:undefined不是一个函数&#34;错误。感谢您的投入!

答案 2 :(得分:0)

您可以先从父的所有兄弟姐妹<和父亲本身删除 active类,然后{ {1}}到父级

add

<强>演示

&#13;
&#13;
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;
&#13;
&#13;