javascript - if else 语句对切换类 Javascript 使用react

Question

我问的最后一个问题。我正在尝试让我的音频在我的类(class)切换时播放，但我不知道要使用什么 if else 语句。

html:

    <section id="sound">
        <img id="speaker" src="img/mic.svg">
        <section>
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
        </section>
    </section>

CSS:

    #sound {
    width: 3em;
    height: 3em;
    margin: 5em 1em;
    position: absolute;
    display: flex;
}

#sound div {
    width: 0.3em;
    background: black;
    border: 1px solid white;
    border-radius: 2em;
}

.one {
    margin-top: 1em;
    height: 1em;
    transition:all 300ms ease-in-out;
}

.oneanimated {
    height: 2em;
    margin-top: 0.5em;
    margin-left: 1em;
    transform: rotate(-45deg);
    transition:all 300ms ease-in-out;
}

JavaScript:

var backgroundtelegrafisch = document.getElementById("backgroundtelegrafisch");
var sound = document.getElementById("sound");
var one = document.getElementsByClassName("one");
var oneanimated = document.getElementsByClassName("one");

function animatie () {
  one[0].classList.toggle("oneanimated");
  two[0].classList.toggle("twoanimated");
  three[0].classList.toggle("threeanimated");

  if (one == oneanimated){
      backgroundtelegrafisch.play();
  } else {
      backgroundtelegrafisch.pause();
      console.log("test");
  }

}
sound.addEventListener("click", animatie);

console.log 从未出现，因此 else 语句从未出现。我该如何解决这个问题？

Answer 1

您在控制台中看不到任何内容的原因是，if 总是成功。你这样做:

var one = document.getElementsByClassName("one");
var oneanimated = document.getElementsByClassName("one");

...这意味着 one 和 oneanimated 彼此完全相同。然后你这样做:

if (one == oneanimated){
    backgroundtelegrafisch.play();
} else {
    backgroundtelegrafisch.pause();
    console.log("test");
}

你现在能看出问题所在了吗？您正在比较 one 和 oneanimated，由于它们是相同的(正如我们之前看到的)，代码将始终命中 backgroundtelegrafisch.play(); 行，而不是进入 else。

您应该这样做，而不是尝试将 one 与 oneanimated 进行比较:

if (one[0].classList.contains("oneanimated")){
    backgroundtelegrafisch.play();
} else {
    backgroundtelegrafisch.pause();
    console.log("test");
}

classList 的 contains 方法检查元素是否具有指定的类。