javascript - 当值 = 0 时将 'muted speaker' 图标链接到音量 slider ？

Question

除了音量 slider 之外，我还有一个扬声器图标，我希望当音量值为 0 时该图标更改为第二个(静音)扬声器图标。我尝试过不同的变体，但没有成功。我怎么做？谢谢!

var volumeslider;
volumeslider = document.getElementById("volumeslider");
	// Add Event Handling
	volumeslider.addEventListener("mousemove", setvolume);
	// Functions
	function setvolume(){
	    audio.volume = volumeslider.value / 100;
    }

input[type=range] {
	-webkit-appearance: none;
	display: inline-block;
	vertical-align: top;
	width: 60%;
	margin: 10px 0;
}
input[type=range]:focus {
	outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
 width: 100%;
 height: 10px;
 cursor: pointer;
 animate: 0.2s;
 background: #000000;
}
input[type=range]::-webkit-slider-thumb {
 border: 1px solid #000000;
 height: 20px;
 width: 10px;
 border-radius: 1px;
 background: #ffffff;
 cursor: pointer;
 -webkit-appearance: none;
 margin-top: -10px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
 background: #666666;
}
input[type=range]::-moz-range-track {
 width: 100%;
 height: 10px;
 cursor: pointer;
 animate: 0.2s;
 background: #000000;
}
input[type=range]::-moz-range-thumb {
 border: 1px solid #000000;
 height: 20px;
 width: 10px;
 border-radius: 1px;
 background: #666666;
 cursor: pointer;
}
input[type=range]::-ms-track {
 width: 100%;
 height: 10px;
 cursor: pointer;
 animate: 0.2s;
 background: transparent;
 border-color: transparent;
 border-width: 16px 0;
 color: transparent;
}
input[type=range]::-ms-fill-lower {
 background: #2a6495;
 border: 0.2px solid #010101;
 border-radius: 2.6px;
}
input[type=range]::-ms-fill-upper {
 background: #3071a9;
 border: 0.2px solid #010101;
 border-radius: 2.6px;
}
input[type=range]::-ms-thumb {
 border: 1px solid #000000;
 height: 20px;
 width: 10px;
 border-radius: 1px;
 background: #ffffff;
 cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
 background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
 background: #367ebd;
}

    <input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
    <img src="https://maxcdn.icons8.com/Android/PNG/48/Mobile/speaker-48.png" width="25" height="32">

Answer 1

使用JQs attr方法来交换图像源。另外，如果您使用外部 JS 文档，请确保图像的 src 路径相对于 HTML 文档。

JS:

 volumeslider.addEventListener("mousemove", checkMute); 

//每次拖动 slider 时检查是否静音。

function checkMute(){
    if (audio.volume == 0){
        $( ".speaker" ).attr("src", "images/speaker.png");
    }else{
        $( ".speaker" ).attr("src", "images/speakermute.png");
    }
}