时间戳

首页 > 解决方案 > 如何在不使用 JQuery 的情况下为滑块元素的每个值添加不同的标题（悬停文本）？

javascript - 如何在不使用 JQuery 的情况下为滑块元素的每个值添加不同的标题（悬停文本）？

问题描述

我在网上寻找如何为每个滑块值创建不同的悬停消息，但我找不到不使用 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 -> 悬停消息：“Stage 1 ...”

示例 2：值 = 2 -> 悬停消息：“Stage 2 ...”

等等

标签： javascripthtmlhoversliderdom-events

解决方案

您可以为更改事件分配一个事件侦听器，然后更新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属性是元素的工具提示或提示文本，我在开始时触发一次更改事件处理程序，因此它将标题初始化为“Stage 0”

推荐阅读