Question

我问的最后一个问题。我正在尝试在我的课程切换时让我的音频播放，但我不知道如果要使用其他语句。

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

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

if else语句对切换类Javascript的反应

1 个答案: