[英]Font awesome icon not changing in response to the slider change
我正在嘗試更改圖標以響應音量控制(范圍)元素,但無法使其正常工作。
我的 html 是:
<div class="slidercontainer fs-4" id="slider-container">
<span style="color:white;"> </span>
<span class="badge rounded-pill bg-warning">Audio Volume</span>
<span style="color:white;"> </span>
<i id="volume_low" class="fa fa-volume-down fa-2x"></i>
<input type="range" min="0" max="2.5" value="0" step="0.1" class="slider" id="myRange">
<i id="volume-up" class="fa fa-volume-up fa-2x"></i>
</div>
...並且它在瀏覽器中正確顯示
我的 javascript 是:
// for slider
const slider = document.querySelector("#myRange");
$("#myRange").on("input change", function()
{
const sliderValue = slider.value;
if(sliderValue==0){
console.log('zero', sliderValue );
$('#volume_low').find("i").toggleClass("fa fa-volume-off fa-2x fa fa-volume-down fa-2x");
}else
{
console.log('nonzero', sliderValue);
$('#volume_low').find("i").toggleClass("fa fa-volume-down fa-2x fa fa-volume-off fa-2x");
}
});
// end of for slider
不起作用(圖標在最左邊 position 中未按要求更改),未顯示任何錯誤s
在下面的示例中,根據聲音狀態提供了三種不同的圖標變化。 以前應用於<i>
元素的 Class styles 被刪除,並分配了新的 class styles。
/* Global Variable; It is initialized using the context of the class implemented in the <i> element. */ let beforeClass = "off"; $("#myRange").on("input change", function() { const sliderValue = $("#myRange").val(); /* previously applied class styles are removed */ $('#volume_low').removeClass(`fa fa-volume-${beforeClass} fa-2x`); if(sliderValue == 0) { $('#volume_low').addClass("fa fa-volume-off fa-2x"); beforeClass = "off"; } else if(sliderValue > 0 && sliderValue <= 1) { $('#volume_low').addClass("fa fa-volume-down fa-2x"); beforeClass = "down"; } else if(sliderValue > 1) { $('#volume_low').addClass("fa fa-volume-up fa-2x"); beforeClass = "up"; } console.clear(); console.log(`Value: ${sliderValue}`); });
i { margin-left: 40px; width: 50px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="slidercontainer fs-4" id="slider-container"> <span style="color:white;"> </span> <span class="badge rounded-pill bg-warning">Audio Volume</span> <span style="color:white;"> </span><br><br> <i id="volume_low" class="fa fa-volume-off fa-2x"></i> <input type="range" min="0" max="2.5" value="0" step="0.1" class="slider" id="myRange"> <i id="volume-up" class="fa fa-volume-up fa-2x"></i> </div>
你確實錯誤地瞄准了我。
不需要.find("i")因為你已經用$('#volume_low')
// for slider const slider = document.querySelector("#myRange"); $("#myRange").on("input change", function() { const sliderValue = slider.value; if (sliderValue == 0) { console.log('zero', sliderValue ); $('#volume_low').removeClass('fa-volume-down').addClass("fa-volume-off"); } else { console.log('nonzero', sliderValue); $('#volume_low').removeClass('fa-volume-off').addClass("fa-volume-down"); } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="slidercontainer fs-4" id="slider-container"> <span style="color:white;"> </span> <span class="badge rounded-pill bg-warning">Audio Volume</span> <span style="color:white;"> </span> <i id="volume_low" class="fa fa-volume-down fa-2x"></i> <input type="range" min="0" max="2.5" value="0" step="0.1" class="slider" id="myRange"> <i id="volume-up" class="fa fa-volume-up fa-2x"></i> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.