Question

我的HTML

<div class="chapter">text text text </div>
<div class="chapter">text text text </div>
<button id="button">button</button>

我的js

var button = document.querySelector('#button');
var chapter = document.querySelectorAll('.chapter');
for(var i = 0; i < chapter.length; i++){
button.addEventListener('click', function(){

for(var i = 0; i < chapter.length; i++) {
chapter[i].classList.add('active');
}
});
}

这增加了＆＃34;活跃＆＃34;点击按钮。

但切换不起作用。而不是

chapter[i].classList.add('active');

当我这样做时，

chapter[i].classList.toggle('active');

等级＆＃34;活跃＆＃34;不切换。控制台显示没有错误。

所以我试着检查一下＆＃34;活跃＆＃34;第一＆amp;如果类存在，则删除该类。我知道我正在尝试重新设计切换功能;如上所述，切换不起作用，所以无论如何我都试过了。

if (chapter[i].contains('active')){
chapter[i].classList.remove('active');

我收到了大量的错误消息。这是我得到的。我不知何故觉得这不起作用，但无论如何都试过了。

我很难过。

任何人都可以指出为什么classList.toggle不能在我的代码和工作中工作如何解决这个问题？

感谢。

Answer 1

你有一个太多的循环。删除外部：

＆＃13;

var button = document.querySelector('#button');
var chapter = document.querySelectorAll('.chapter');

button.addEventListener('click', function(){
  for(var i = 0; i < chapter.length; i++) {
    chapter[i].classList.toggle('active');
  }
});

＆＃13;

.active{
  color: red;
}

＆＃13;

<div class="chapter">text text text </div>
<div class="chapter">text text text </div>
<div class="chapter">text text text </div>
<div class="chapter">text text text </div>
<button id="button">button</button>

＆＃13;

Answer 2

＆＃13;

var button = document.querySelector('#button');
var chapters = document.querySelectorAll('.chapter');

  button.addEventListener('click', function(){
   for(var index = 0; index < chapters.length; index++) {
      if(chapters[index].classList.contains('active')){
        chapters[index].classList.remove('active');
      }else{
        chapters[index].classList.add('active');
      }
    }
  });

＆＃13;

.active {
  color: red;
  }

＆＃13;

<div class="chapter">text text text </div>
<div class="chapter">text text text </div>
<button id="button">Toggle Color</button>

＆＃13;

classList.add有效，但切换不起作用

2 个答案: