我要问的最后一个问题。我正在尝试让我的音频在班级切换时播放,但是我不知道要使用什么其他语句。
的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");
...这意味着
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
方法检查元素是否具有指定的类。