javascript - 在 ES6/ES7 中添加和删除 HTML 元素中的类

Question

我有以下code其中我有一些 HTML 按钮 元素。

我希望每当我单击一个按钮时，类selected应该在该按钮中切换。

这是代码:

window.onload = function() {
  const [...btns] = document.getElementsByTagName('button');
  
  for(let i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function() {
      if(this.className.split(' ').indexOf('selected') > -1) {
        this.className = this.className.split(' ').pop();
      } else {
        this.className = this.className.split(' ').push('selected').join(' ');
      }
      
      console.log(this.className);
    });
  }
}

button {
  outline: none;
  border: none;
  padding: 3px 7px;
  color: #FF4A3F;
  background: #E7E7E7;
  font: 500 16pt calibri;
  transform: scale(1, 0.95);
}
.selected {
  background: #353553;
  color: white;
}

<button>Home</button>
<button>Admission</button>
<button>Results</button>
<button>Curriculum</button>
<button>Contact us</button>

<小时/> 但是，当我运行上面的代码时，我收到以下错误消息:

Uncaught TypeError: this.className.split(...).push(...).join is not a function

我做错了什么？

Answer 1

您可以通过使用classList.toggle来大大简化逻辑。您还可以使用querySelectorAll，您可以直接forEach:

document.querySelectorAll('button').forEach(btn => {
  btn.addEventListener('click', () => {
    btn.classList.toggle('selected');
  });
});

button {
  outline: none;
  border: none;
  padding: 3px 7px;
  color: #FF4A3F;
  background: #E7E7E7;
  font: 500 16pt calibri;
  transform: scale(1, 0.95);
}
.selected {
  background: #353553;
  color: white;
}

<button>Home</button>
<button>Admission</button>
<button>Results</button>
<button>Curriculum</button>
<button>Contact us</button>

原始代码的问题是 push 不返回数组；它返回数组的长度，因此它不可链接(不幸的是)。与 pop() 相同。

调整您的代码以使其正常工作，假设最后一个className将始终选择，如下所示:

window.onload = function() {
  const [...btns] = document.getElementsByTagName('button');
  
  for(let i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function() {
      const classNameArr = this.className.split(' ');
      if(classNameArr.indexOf('selected') > -1) {
        classNameArr.pop();
        this.className = classNameArr.join(' ');
      } else {
        classNameArr.push('selected')
        this.className = classNameArr.join(' ');
      }
      console.log(this.className);
    });
  }
}

button {
  outline: none;
  border: none;
  padding: 3px 7px;
  color: #FF4A3F;
  background: #E7E7E7;
  font: 500 16pt calibri;
  transform: scale(1, 0.95);
}
.selected {
  background: #353553;
  color: white;
}

<button>Home</button>
<button>Admission</button>
<button>Results</button>
<button>Curriculum</button>
<button>Contact us</button>