带计算的数字 JS 滑块答案

【问题标题】：Numeric JS slider with calculation带计算的数字 JS 滑块
【发布时间】：2013-11-28 05:58:08
【问题描述】：

我已经想出了如何设置一个固定的最大滑块（在本例中为 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 以确保计算有效，它确实有效。

【问题讨论】：

标签： javascript jquery jquery-ui calculator

【解决方案1】：

如果我很好地理解了您的问题，您想在更改滑块值后立即进行计算，那么您可能希望在滑块的“滑动”事件中进行计算，使用您赢得的一些 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" ) );

});

【讨论】：

完美 - 现在我可以在那里看到所有内容，这更有意义。非常感谢