Verwenden Sie mehrere Live-Slider auf HTML mit Jquery

Ich bin neu das Javascript und möchte das folgende Problem zu lösen. Der folgende HTML-Code zeigt zwei Live-Slider-Eingaben in einer Form. aber nur einer arbeitet. (source: Live output in jQuery HTML5 range slider)Verwenden Sie mehrere Live-Slider auf HTML mit Jquery

Also wie kann ich mehrere Schieberegler mit unterschiedlichen Werten auf der gleichen Webseite verwenden?

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

Quelle

2016-07-11 stahlstngel

IDs ** muss ** einmalig sein – j08691

Das Problem ist, weil Sie die id Attribute in Ihrem HTML dupliziert haben, wenn sie eindeutig sein müssen. Sie müssen den Code stattdessen in Klassen konvertieren.

zu tun, dass Sie die rangevalue Elemente auswählen, und dann .next() verwenden, um das damit verbundene .text Element, wie diese zu finden:

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

Quelle

2016-07-11 13:29:40

Funktioniert wie ein Zauber. Groß. Ich bin Ihnen sehr dankbar für schnelle und kompetente Hilfe. Vielen Dank. – 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>

Quelle

2016-07-11 13:36:18

Verwenden Sie mehrere Live-Slider auf HTML mit Jquery

Antwort

Verwandte Themen