如何將jQuery滑塊值與定義的變量相乘？

我想用滑塊將每天的分鐘數乘以指定的數字（如0.05）。那麼我想把它乘以30，以便它是一個粗略的每月估計。然後，我想在靠近底部的「估計月度帳單」段落旁顯示該值。如何將jQuery滑塊值與定義的變量相乘？

Ex。

monthlyEstimate = slidervalue * .05 * 30

滑塊是從jQuery UI網站借用的。下面是代碼：

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

</head> 



<body> 
    <style> 
    #slider-range-min{ 
    width: 200px; 
    height:10px; 
    } 
    </style> 
    <div id="estimate"> 

    <p> 
     <label for="amount">Minutes Per Day:</label> 
     <input type="text" id="amount" style="border: 0; color: #B01D63; font-family: Signika;" /> 
    </p> 

    <div id="slider-range-min"></div> 
    <br /> 


<p> 
    Estimated Monthly Bill:  
</p>

來源

2012-11-18 Evan

使用乘法運算符？我不知道這裏的問題是什麼... – Ryan

這將是一個完美的場景knockout.js和計算可觀察... – Alnitak

應該指定我對jQuery一無所知......我不知道如何甚至創建一個變量。 – Evan

下面添加您預計每月帳單文本的跨度，所以我們可以把值到指定的地方：

HTML

<p> 
    Estimated Monthly Bill: 
    <span id="EstimatedMonthlyBill"></span> 
</p>

然後改變你滑塊滑動屬性做計算並插入值：

Javascript

$(function() { 
    $("#slider-range-min").slider({ 
     range: "min", 
     value: 1, 
     min: 1, 
     max: 150, 
     slide: function(event, ui) { 
      $("#amount").val("" + ui.value); 

      var estimatedMonthlyBill = Math.round(100 * (parseFloat(ui.value) * .05 * 30))/100; 

      $("#EstimatedMonthlyBill").text(estimatedMonthlyBill); 
     } 
    }); 
    $("#amount").val("" + $("#slider-range-min").slider("value")); 
});

演示
http://jsfiddle.net/2FMRU/

來源

2012-11-18 23:25:17 3dgoo

非常感謝！我真的很感激它:) – Evan

不客氣。我已經更新了包含演示和Math.round代碼以解決乘法上的JavaScript浮點錯誤的答案：http://stackoverflow.com/questions/1458633/elegant-workaround-for-javascript-floating-point-數字問題 – 3dgoo

我真的回到這個問題，並想知道我將如何圍繞它。然後我看到了這一點。必須讀懂我的想法。非常感謝。 – Evan

變化

<p> 
    Estimated Monthly Bill:  
</p>

要

<p> 
Estimated Monthly Bill: <span id='estimate'></span> 
</p>

我們將使用jQuery了最新的估計跨度命名時滑塊移動。 *是javascript中的乘法運算符。在下面的代碼中，將SOME_CONSTANT替換爲您需要的任何內容。大多數小數例如。 100.234，0.00005應該可以正常工作。

變化

slide: function(event, ui) { 
     $("#amount").val("" + ui.value); 
    }

爲了這樣的事情：

slide: function(event, ui) { 
     $("#amount").val("" + ui.value); 
     $("#estimate").val("" + (ui.value*SOME_CONSTANT*30)); 
}

當滑塊移動時，<span id='estimate'>將被更新，以顯示計算值。

我希望這是你正在尋找的。

來源

2012-11-18 23:25:44

這也很有幫助，謝謝！ – Evan

如何將jQuery滑塊值與定義的變量相乘？

回答

相關問題