在 html 和 jquery 上使用多个实时滑块

Question

我是 Javascript 的新手，想解决以下问题。下面的 html 代码以一种形式显示了两个实时滑块输入。但只有一个在工作。（来源：Live output in jQuery HTML5 range 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>

Answer 1

问题是因为您在 HTML 中复制了 id 属性，而这些属性必须是唯一的。您需要将代码转换为使用类。

为此，您可以 select 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>

Answer 2

$(".rval").mousemove(function () {
            $(this).siblings('.tlabel').text($(this).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" class="rval" name="p" value=16.08 min=0.01 max=32.08 id="rangevalue" step ="0.01"><label class="tlabel" id="text" >16.08</label>
 </td>
</tr>
<tr>
 <td>
  <input type="range" class="rval" name="p" value=100 min=50 max=150 id="rangevalue" step ="0.01"><label class="tlabel" id="text">100</label> sec.
 </td>
</tr>
</table>
<br><input style="font-size:25px" type="submit" value="START">
</form>

</body>
</html>

在 html 和 jquery 上使用多个实时滑块

use multiple live slider on html with jquery

html

javascript

jquery

slider