Question

单击导航项后，我可以向其添加is-active类。但是，我想删除该类并将其添加到单击另一个导航项时。

这是我目前正在使用的东西：

JS：

const links = document.querySelectorAll('a');

links.forEach(function(link, index){
  link.addEventListener('click', function() {
    if(this.classList.contains('is-active')) {
      this.classList.remove('is-active');
    } else {
      this.classList.add('is-active');
    }
  });
});

Here's a Codepen example.

这种尝试会添加该类，但是在单击另一个链接时不会将其删除。

我如何删除课程？预先感谢。

Answer 1

您只需遍历不是this的链接：

const links = document.querySelectorAll('a');

links.forEach(function(link, index){
  link.addEventListener('click', function() {
    if(this.classList.contains('is-active')) {
      this.classList.remove('is-active');
    } else {
      this.classList.add('is-active');
      links.forEach(l => {                     // ***
          if (l !== this) {                    // ***
              l.classList.remove('is-active'); // ***
          }                                    // ***
      });
    }
  });
});

（for-of版本请参见下文。）

或者，您可以仅对is-active链接进行新查询：

document.querySelectorAll('a').forEach(function(link, index){
  link.addEventListener('click', function() {
    if(this.classList.contains('is-active')) {
      this.classList.remove('is-active');
    } else {
      document.querySelectorAll('a.is-active').forEach(activeLink => { // ***
          activeLink.classList.remove('is-active');                    // ***
      });                                                              // ***
      this.classList.add('is-active');
    }
  });
});

或者，如果需要，querySelector应该只有一个，

document.querySelectorAll('a').forEach(function(link, index){
  link.addEventListener('click', function() {
    if(this.classList.contains('is-active')) {
      this.classList.remove('is-active');
    } else {
      const activeLink = document.querySelector('a.is-active'); // **
      if (activeLink) {                                         // **
          activeLink.classList.remove('is-active');             // **
      }                                                         // **
      this.classList.add('is-active');
    }
  });
});

旁注：NodeList中的querySelectorAll在某些浏览器中没有forEach（它是最近才添加的）。请参见this answer，以了解丢失时如何添加它，以及（在ES2015 +平台上）如何确保它也是可迭代的（这也是它的原意）。

如果可以依靠可迭代性，则可以使用以下for-of版本：

for-of版本的第一个示例：

const links = document.querySelectorAll('a');
for (const link of links) {
  link.addEventListener('click', function() {
    if(this.classList.contains('is-active')) {
      this.classList.remove('is-active');
    } else {
      this.classList.add('is-active');
      for (const l of links) {
          if (l !== this) {
              l.classList.remove('is-active');
          }
      }
    }
  });
}

第二个示例的

for-of版本：

for (const link of document.querySelectorAll('a')) {
  link.addEventListener('click', function() {
    if(this.classList.contains('is-active')) {
      this.classList.remove('is-active');
    } else {
      for (const activeLink of document.querySelectorAll('a.is-active')) {
          activeLink.classList.remove('is-active');
      }
      this.classList.add('is-active');
    }
  });
}

第三个：

for (const link of document.querySelectorAll('a')) {
  link.addEventListener('click', function() {
    if(this.classList.contains('is-active')) {
      this.classList.remove('is-active');
    } else {
      const activeLink = document.querySelector('a.is-active'); // **
      if (activeLink) {                                         // **
          activeLink.classList.remove('is-active');             // **
      }                                                         // **
      this.classList.add('is-active');
    }
  });
}

Answer 2

一个常见要求-您可以执行以下操作：

使用spread syntax像[...document.querySelectorAll('a')]

DOM元素

可迭代表示

使用forEach通过链接循环
您可以使用classList.toggle函数来代替if-else条件

请参见下面的演示

// get an iterable representation using the spread syntax
const elements = [...document.querySelectorAll('a')];

elements.forEach(e => e.addEventListener('click', () => {
  // remove active class from all links
  elements.forEach(e => e.classList.remove('is-active'));
  // add active to the clicked link
  e.classList.toggle('is-active');
}));

.is-active {
  color: red;
}

<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>

Answer 3

函数中的

this是指被单击的元素。每次单击时，都应使用forEach隐藏所有元素。然后显示所需的一个

const links = [...document.querySelectorAll('a')];

links.forEach(function(link, index){
  link.addEventListener('click', function() {
    let temp = this.classList.contains('is-active')
    links.forEach(x => x.classList.remove('is-active'))
    if(!temp) {
      this.classList.add('is-active');
    } 
  });
});

点击某个导航项，添加一个类别，从其他导航项中删除该类别-香草JS

3 个答案: