我要问的最后一个问题。我正在尝试让我的音频在班级切换时播放,但是我不知道要使用什么其他语句。

的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语句永远不会出现。我怎样才能解决这个问题?

最佳答案

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

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


...这意味着oneoneanimated彼此完全相同。然后执行以下操作:

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


现在可以看到问题了吗?您正在比较oneoneanimated,并且由于它们是相同的(如我们先前所见),所以代码将始终按backgroundtelegrafisch.play();行而不是进入else

不要尝试将oneoneanimated进行比较,而应该这样做:

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


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

10-06 07:38