我问的最后一个问题。我正在尝试让我的音频在我的类(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 语句从未出现。我该如何解决这个问题?
最佳答案
您在控制台中看不到任何内容的原因是,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
方法检查元素是否具有指定的类。
关于javascript - if else 语句对切换类 Javascript 使用react,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45023139/