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的滑塊實時輸出

回答

相關問題