javascript - 为什么切换的类不会为元素设置动画并且控制台中没有错误

Question

只是想找出为什么在尝试添加切换时它会被添加但元素不会改变样式并且我没有收到任何错误。

const burger = document.getElementsByClassName('barra')

const burgerArray = Array.from(burger)

function buttonChange() {
  for (i = 0; i < burgerArray.length; i++) {
    burgerArray[i].classList.toggle("change");
    console.log(burgerArray[i]);
  }
}

.change b1 {
  background-color: red;
}

.change b2 {
  background-color: blue;
}

.change b3 {
  background-color: green;
}

<div onclick="buttonChange()" id="burgers" class="burger-menuu">
  <div class="barra" id="bar1"></div>
  <div class="barra" id="bar2"></div>
  <div class="barra" id="bar3"></div>
</div>

标签： javascript

Answer 1

像这样做：

const burgerArray = document.querySelectorAll(".barra");

function buttonChange() {
  for (i = 0; i < burgerArray.length; i++) {
    burgerArray[i].classList.toggle("change");
    console.log(burgerArray[i]);
  }
}

#bar1.change {
  background-color: red;
}

#bar2.change {
  background-color: blue;
}

#bar3.change {
  background-color: green;
}

<div onclick="buttonChange()" id="burgers" class="burger-menuu">
  <div class="barra" id="bar1">Sample Text 1</div>
  <div class="barra" id="bar2">Sample Text 2</div>
  <div class="barra" id="bar3">Sample Text 3</div>
</div>