我是 Javascript 新手，想要解决以下问题。下面的 html 代码以一种形式显示了两个实时 slider 输入。但只有一个在工作。 (来源:Live output in jQuery HTML5 range slider)
那么如何在同一网页上使用具有不同值的多个 slider ？
$("#rangevalue").mousemove(function () {
$("#text").text($("#rangevalue").val())
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head><title>Timing:</title></head>
<body>
<h1>TIMING:</h1>
<form action="/cgi-bin/can/test.cgi" method="post">
<table style="width:300px" border="1">
<th>time</th>
<tr>
<td>
<input type="range" name="p" value=16.08 min=0.01 max=32.08 id="rangevalue" step ="0.01"><label id="text" >16.08</label>
</td>
</tr>
<tr>
<td>
<input type="range" name="p" value=100 min=50 max=150 id="rangevalue" step ="0.01"><label id="text">100</label> sec.
</td>
</tr>
</table>
<br><input style="font-size:25px" type="submit" value="START">
</form>
</body>
</html>最佳答案
问题是因为您在 HTML 中重复了 id 属性，而这些属性必须是唯一的。您需要将代码转换为使用类。
为此，您可以选择 rangevalue 元素，然后使用 .next() 查找相关的 .text 元素，例如这个:
$(".rangevalue").on('change mousemove', function() {
$(this).next(".text").text(this.value)
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table style="width:300px" border="1">
<th>time</th>
<tr>
<td>
<input type="range" name="p" value="16.08" min="0.01" max="32.08" class="rangevalue" step="0.01">
<label class="text">16.08</label>
</td>
</tr>
<tr>
<td>
<input type="range" name="p" value="100" min="50" max="150" class="rangevalue" step="0.01">
<label class="text">100</label>sec.
</td>
</tr>
</table>关于javascript - 使用 jquery 在 html 上使用多个实时 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38308212/