當value = 0時，將'靜音揚聲器'圖標鏈接到音量滑塊？

我的音量滑塊旁邊有一個揚聲器圖標，我希望圖標在音量值爲0時更改爲第二個（靜音）揚聲器圖標。我試過不同的變化，沒有奏效。我怎麼做？謝謝！當value = 0時，將'靜音揚聲器'圖標鏈接到音量滑塊？

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

input[type=range] { 
 
\t -webkit-appearance: none; 
 
\t display: inline-block; 
 
\t vertical-align: top; 
 
\t width: 60%; 
 
\t margin: 10px 0; 
 
} 
 
input[type=range]:focus { 
 
\t 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">

來源

2016-10-10 user6245760

因此，當值爲零時設置src。 – epascarello

使用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"); 
    } 
}

來源

2016-10-10 21:38:13 Korgrue

我不能得到它的工作。（audio.volume == 0）{（「。speaker」）。attr（「src」，「images/speakermuted.png」）; （「。speaker」）。attr（「src」，「images/speaker.png」）;其他{0} } – user6245760

它不會讓我編輯或正確地構造上述回覆。我究竟做錯了什麼？不應該有一個。在圖像類中的「說話人」之前。 – user6245760

取決於您如何構建您的CSS。如果您使用：僞僞類前的圖標添加圖標，則必須修改$（「.your-volume-icon-class」）中的目標對象才能定位圖標類（或者如果它被附加到使用在僞類之前，你需要包含你之前的所有代碼:: 以上所有的代碼都是從DOM中抓取圖標並將其轉換爲jQuery對象，以便操縱它 - 然後將屬性「src」當音量爲0時，指向靜音圖標的路徑。另外，這是處理程序，你需要一個觀察者，我會編輯代碼。 – Korgrue

當value = 0時，將'靜音揚聲器'圖標鏈接到音量滑塊？

回答

相關問題