0

我有一个单击事件，它将一个活动类添加到链接的父节点。单击时，应从 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>

4

3 回答 3

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'); 
}
于 2018-03-05T06:28:52.247 回答
0

在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>

杰米更新：

我这样使用你的建议：

<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>

我收到“未捕获的类型错误：未定义不是函数”错误。感谢您的输入！

于 2018-03-05T06:37:25.050 回答
0

您可以先从parent 的所有兄弟姐妹（以及parent 本身）中删除active该类，然后再删除到parentadd

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>

于 2018-03-05T06:42:54.707 回答