Question

我已经弄清楚如何设置固定的最大滑块（在这种情况下为1-99）

现在我要做的是将另一个单独的函数绑定到计算节省的函数中。基本上它是计算滑块号x .8（保存）x 365（天），或：

x（滑块变量）* y * z

问题是我无法获取x来获取滑块值

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Range with fixed maximum</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
$(function() {
$( "#slider-range-max" ).slider({
  range: "max",
  min: 1,
  max: 99, 
  value: 2,
  slide: function( event, ui ) {
    $( "#amount" ).val( ui.value );
  }
  });
  $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );

  });

$(function() {
{
x=20; /* This is the variable #amount */
y=.8;
z=365;
a=x*y*z;
document.getElementById("product").innerHTML=a;
}

}); 


</script>


</head>
<body>

<p>
<label for="amount">Per Day:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range-max"></div>
<br/>

<p id="result">
You save $<span id="product"></span>
</p>

</body>
</html>

我刚刚输入x = 20来确保计算有效。

Answer 1

如果我理解你的问题，你想在更改滑块值后立即进行计算，那么你会想要在滑块的“slide”事件中进行计算，使用你赢得的一些jquery功能不需要代码的第二个块，脚本块将是这样的：

$(function() {
 $( "#slider-range-max" ).slider({
   range: "max",
   min: 1,
   max: 99, 
   value: 2,
   slide: function( event, ui ) {
     $( "#amount" ).val( ui.value ); //ui.value inside the event contains the slider value
     var x=$("#amount").val(); //this way you access slider value anywhere in your code
     var y=.8;
     var z=365;
     var a=x*y*z;
     $("#product").html(a); 
   }
 });
   $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );

});

带计算的数字JS滑块

1 个答案: