当值 = 0 时，将“静音扬声器”图标链接到音量滑块？

Posted 2023-05-08

【中文标题】当值 = 0 时，将“静音扬声器”图标链接到音量滑块？

【英文标题】：Linking 'muted speaker' icon to volume slider when value = 0?

【发布时间】：2017-02-19 09:07:21

【问题描述】：

我的音量滑块旁边有一个扬声器图标，我希望该图标在音量值为 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"  >

【问题讨论】：

所以在值为零的时候设置src。

【参考方案1】：

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

JS：

 volumeslider.addEventListener("mousemove", checkMute); 

//每次拖动滑块时检查静音。

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

【讨论】：

我无法让它工作。

它不会让我编辑或正确构建上述回复。我究竟做错了什么？不应该有一个 .在图像类中的“扬声器”之前。

取决于你的 CSS 结构。如果您使用 :before 伪类附加图标，则必须修改 $(".your-volume-icon-class") 中的目标对象以定位图标类（或者如果使用附加到对象:before 伪类，您需要包含 yourobjectname::before音量为 0 时指向静音图标。另外，那是处理程序。你需要一个观察者。我将编辑代码。