jQuery的滑块实时输出

HMTL

<p>Money: <span id="amountDisp">500</span><div id="amount_slider"></div></p><p>Time: <span id="timeDisp">7</span><div id="time_slider"></div></p><p>Calculated <span id="result" >545</span></p>

JQuery的：

$(document).ready(function() { 
    $("#amount_slider").slider({ 
     orientation: "horizontal", 
     range: false, 
     min: 500, 
     max: 4999, 
     value: 500, 
     step: 1, 
       animate: true, 
     change: function (event, ui) { 
      $("#amount_field").val(ui.value); 
      $("#amount").text(ui.value); 
      calculate(); 
     }, 
       slide: function (event, ui) { 
      $("#amount_field").val(ui.value); 
      $("#amountDisp").text(ui.value); 
     } 
    }); 
    $("#time_slider").slider({ 
     orientation: "horizontal", 
     range: false, 
     min: 7, 
     max: 28, 
       step: 7, 
     value: 7, 
       animate: true, 
     change: function (event, ui) { 
      $("#time_field").val(ui.value); 
      $("#time").text(ui.value); 
      calculate(); 
     }, 
       slide: function (event, ui) { 
      $("#time_field").val(ui.value); 
      $("#timeDisp").text(ui.value); 
     } 
    }); 
    function calculate() { 
     var amount = parseInt($("#amount_slider").slider("value")); 
     var time = parseInt($("#time_slider").slider("value")); 
       var coeficient = 0; 
       switch(time){ 
         case 7: coeficient = 0.09;break; 
         case 14: coeficient = 0.15;break; 
         case 21: coeficient = 0.19;break; 
         case 28: coeficient = 0.25;break; 
         } 
     var rate = amount + (amount * coeficient); 
     $("#result").text(rate.toFixed(2)); 
     $("#result_field").val(rate.toFixed(2)); 
    } 
});

1）它基本上我想要做什么。但是，我想让“计算”字段（或输出）更加平滑。所以它会在我滑动时改变它的价值。像滑块上面的另外两个输出一样。

2）另一个问题是，如何做到这一点。我的意思是输入将由用户在典型的表单输入中输入。它也会计算。

来源

2013-04-13 jevniky

能否请您制定第2部分更清楚一点？或者，也许把它移到一个新的问题？ –

slide: function (event, ui) { 
     $("#amount_field").val(ui.value); 
     $("#amountDisp").text(ui.value); 
       calculate(); 
    }

你需要计算滑动事件。

Fiddle

来源

2013-04-13 11:23:13

thx :) 和一个更多的问题。尝试将滑块快速移动到最低值，然后查看“Calculated：”显示的内容。有没有办法，让它更多...我不知道..专注？为了真正获得那些设定的值？ – jevniky

您需要编写您的逻辑slide实时更新的回调函数，而不是change。

关于你的第二个问题，用这个新语句设置一个更好的jsfiddle。我知道，它会花你几分钟，但更好地采取自己的时间比其他成员的时间...

来源

2013-04-13 11:21:49

嗨，我不知道该怎么做，所以我问。这是我的瘸腿尝试:) http://jsfiddle.net/m6qJC/6/ – jevniky

你有这样的：

change: function (event, ui) { 
      $("#time_field").val(ui.value); 
      $("#time").text(ui.value); 
      calculate(); 
     }, 
slide: function (event, ui) { 
      $("#time_field").val(ui.value); 
      $("#timeDisp").text(ui.value); 
     }

你需要这样的：

change: function (event, ui) { 
      $("#time_field").val(ui.value); 
      $("#time").text(ui.value); 
     }, 
slide: function (event, ui) { 
      $("#time_field").val(ui.value); 
      $("#timeDisp").text(ui.value); 
      calculate(); //move calculate on SLIDE event, which is triggered on every mousemove 
     }

做喜欢的两个滑块。

来源

2013-04-13 11:24:31

你好如果你想滑块值实时使用输入功能，而不是改变功能例如更新如下：

$("#time_slider").slider({ 
    orientation: "horizontal", 
    range: false, 
    min: 7, 
    max: 28, 
      step: 7, 
    value: 7, 
      animate: true, 
    input: function (event, ui) { 
     $("#time_field").val(ui.value); 
     $("#time").text(ui.value); 
     calculate(); 
    }, 
      slide: function (event, ui) { 
     $("#time_field").val(ui.value); 
     $("#timeDisp").text(ui.value); 
    } 
});

来源

2017-10-24 09:14:35

jQuery的滑块实时输出

回答

相关问题