如果不起作用，其他多个语句

Question

当播放器的音量级别发生变化时，我正在尝试更换音量图像，
但是使用这个代码，第二个else if不起作用，
并且没有出现3°图像（VOL-1.png）......

所有其他图像（VOL-off，VOL-2，VOL-on）正确显示......

var myVideo1 = document.getElementById('myVideo1');
var bttnMuteUnmute = document.getElementById("bottoncinoMuteUnmute_myVideo1");

myVideo1.addEventListener("volumechange", function () {
    if (myVideo1.muted || myVideo1.volume <= 0.009) {
        bttnMuteUnmute.style.backgroundImage = "url(buttons-VOL-off.png)";
    } else if (myVideo1.volume <= 0.65) {
        bttnMuteUnmute.style.backgroundImage = "url(buttons-VOL-2.png)";
    } else if (myVideo1.volume <= 0.4) {
        bttnMuteUnmute.style.backgroundImage = "url(buttons-VOL-1.png)";
    } else {
        bttnMuteUnmute.style.backgroundImage = "url(buttons-VOL-on.png)";
    }
}, false);

我做错了什么？

Answer 1

任何小于0.4也将小于0.65 。 因此，当数字小于0.4 ，它与<= 0.65比较，它是Truthy，因此显示VOL-2图片。

所以，你只需改变条件的顺序，就像这样

...
} else if (myVideo1.volume <= 0.4) {
bttnMuteUnmute.style.backgroundImage = "url(buttons-VOL-1.png)";
} else if (myVideo1.volume <= 0.65) {
bttnMuteUnmute.style.backgroundImage = "url(buttons-VOL-2.png)";
} else {
...

Answer 2

由于if-else语句按顺序进行评估，因此它会卡在VOL-2中，因为VOL-1的任何选项也符合VOL-2。 如果您要切换VOL-1和VOL-2的顺序，它应该可以工作。