jqueryでhtmlの複数のライブスライダーを使用

私は新しいJavascriptであり、以下の問題を解決したいと考えています。下のHTMLコードは、1つのフォームに2つのライブスライダ入力を示しています。 1人だけが働いています。（ソース：Live output in jQuery HTML5 range slider）jqueryでhtmlの複数のライブスライダーを使用

同じWebページで異なる値を持つ複数のスライダを使用するにはどうすればよいですか？

$("#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>

出典

2016-07-11 stahlstngel

のID **は一意である必要があります** – j08691

彼らは一意である必要があるときに、あなたのHTML内id属性が重複しているため、問題があります。代わりにクラスを使用するようにコードを変換する必要があります。

あなたが rangevalue要素を選択し、このように、関連 .text要素を見つけるために .next()を使用できることを実行します。

$(".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>

出典

2016-07-11 13:29:40

魅力のように動作します。すばらしいです。私はあなたに迅速かつ有能な助けにあなたに非常に感謝しています。ありがとう。 – stahlstngel

$(".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>

出典

2016-07-11 13:36:18

jqueryでhtmlの複数のライブスライダーを使用

答えて

関連する問題