2015-03-03 3 views
0

Что я делаю неправильно?jquery ползунок сумма обновления нужно нажать два раза?

Мне нужно переместить ползунок и дважды щелкнуть по строке, чтобы получить значение!

У меня есть ползунок - это значение отображается над ползунком. Затем он умножается на 5, а затем отображается под ползунком.

Это мой код:

<!DOCTYPE html> 
<html> 
<head> 
<link type="text/css"href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 

<script>  
$(document).ready(function(){ 
function updateAmounts() { 
var value1 = $('#slider1').slider('value'); 
$('#amount1').val(value1); 
var ude1 = 5 * value1; 
$('#ude2').val(ude1); 
} 

$('#slider1').slider({value: 0, min: 0, max: 200, step: 1, slide: function(event, ui) { 
    updateAmounts(); 
}}); 

updateAmounts(); 
}); 
</script> 

</head> 
<body> 

<p> 
<label for='amount1'>Value:</label> 
<input type='number' id='amount1' name='amount1' style='border:0; color:#0072a7; font-weight:bold;' /> 
</p> 

<div id='slider1'></div> 

<input class="input" size="4" type="text" id="ude2" name="ude2" style="border:0; background:transparent; color:#000000; font-weight:bold; font-size:2.7em;" /> 

</body> 
</html> 

ответ

0

JQuery:

$('#slider').slider({value: 10, min: 0, max: 200, step: 1, slide: function(event, ui) { 

$('#amount1').val(ui.value); 
$('#ude2').val(ui.value * 5); 
}}); 

HTML:

<p> 
<label for='amount1'>Value:</label> 
<input type='text' id='amount1' name='amount1' style='border:0; color:#0072a7; font-weight:bold;' /> 
</p> 

<div id='slider'></div> 

<input class="input" size="4" type="text" id="ude2" name="ude2" style="border:0; background:transparent; color:#000000; font-weight:bold; font-size:2.7em;" /> 

Ссылка: http://jsfiddle.net/srxt8egc/

Смежные вопросы