Question

我有以下code，其中我有一些HTML button元素。

我希望每当我click按钮时，班级selected都应该切换。

以下是代码：

＆＃13;

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);
    });
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

未捕获TypeError：this.className.split（...）。push（...）。join不是函数

我做错了什么？

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没有返回数组;它会返回数组的 length ，因此它不可链接（不幸的是）。与pop()相同。

调整代码以使其有效，假设最后className始终为selected，如下所示：

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>

Answer 2

＆＃13;

window.onload = function() {
  const [...btns] = document.getElementsByTagName('button');
  
  for(let i = 0; i < btns.length; i++) {
    btns[i].addEventListener('click', function() {
   this.classList.contains("selected")?this.classList.remove("selected"):this.classList.add("selected");
    });
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您是否考虑过使用jquery执行此操作，它们有一个remove和removeclass方法：

$("button").removeClass("selected");


$("button").addClass("selected");

希望这会有所帮助：）

Answer 4

这里的问题是push不返回新数组，它返回新数组的长度。 MDN docs for push。因此，当你到达join时，它正在尝试加入一个数字，而不是像你期望的那样加入数组。

幸运的是，对于这个用例，有一种方法可以直接使用 - classList.toggle

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

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

4 个答案: