如何在不使用JQuery的情況下為滑塊元素的每個值添加不同的標題（懸停文本）？

Question

我在網上尋找如何為每個滑塊值創建不同的懸停消息，但是找不到不使用JQuery的東西。

 <!-- Slider Input --> <input type="range" id="mySlider" value="0" min="0" max="10" style="width:80%;" title="This should change every value."/> 

我要嘗試的是當用戶將滑塊（子彈）懸停時； 懸停消息顯示簡單的內容。 請參閱以下示例：

示例1：值= 1->懸停消息：“階段1 ...”

示例2：值= 2->懸停消息：“階段2 ...”

等等

Answer 1

您可以將事件偵聽器分配給change事件，然后更新滑塊的title屬性，如下所示...

 var slider = document.getElementById("mySlider"); function onSliderChange() { slider.title = "Stage " + slider.value; } slider.addEventListener("change", onSliderChange); onSliderChange(); 

 <input type="range" id="mySlider" value="0" min="0" max="10" style="width:80%;"/> 

title屬性是工具提示或元素的提示文本，我一開始就觸發一次更改事件處理程序，因此它以“階段0”初始化標題。

Answer 2

誤解了滑塊的含義，如果您想使用普通的javascript，請嘗試以下操作：

let input = Document.getElementbyId("mySlider");
input.addEventListener("mouse up", (e) => {
    if(e.currentTarget.value === 1){
        console.log("Hover Msg: Stage 1 ...") 
        // or you could display message in an elsewhere tag
    }
    else if(e.currentTarget.value === 2){
        console.log("Hover Msg: Stage 2 ...")
    }