javascript - 多个语句 else 如果不起作用

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 {
...