2014-02-07 52 views
0

我想知道是否有人可以解釋如何打印出滑塊的值與數學添加折扣變量項目。Jquery的UI滑塊可變比例

http://jsfiddle.net/spadez/w7A4k/6/

例如,如果我想這樣做:

(40 * NUMBER) - (NUMBER * 0.1) 

這將有10%的折扣,主要適用於顯示每增加數量,而不是它是一個1:1的比例。

  • 如果滑塊值等於1,則成本爲$ 40
  • 如果滑塊等於2那麼值爲$ 76

我能做爲出發點,最好是這樣獲得沒有折扣的總數:

$("#amount")ui.value * 40); 

請問有人能解釋我該怎麼做?

回答

1

這是不是很清楚你打算做什麼打折。

如果我們按照公式

(40 * NUMBER) - (NUMBER * 0.1)

不匹配,例如:如果滑塊值等於1,則費用爲40 $

如果滑塊等於2則值爲$ 76

由於,

  • 號= 1 - >(40 * 1) - (1×0.1)= 39.90
  • 數= 2 - >(40 * 2) - (2 * 0.1)= 79.80

我覺得你真的意味着這樣的事情...

(40 * NUMBER) - 0.1 *( - 1)* 40

這將是

  • 總數= 1 - >(40 * 1) - 0.1 *(1 - 1)* 40 = 40
  • Number = 2 - >(40 * 2) - 0.1 *(2-1)* 40 = 76

是這樣嗎?

UPDATE:

http://jsfiddle.net/kLKxX/

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Slider - Snap to increments</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script> 
    $(function() { 
    $("#slider").slider({ 
     value:1, 
     min: 1, 
     max: 100, 
     step: 1, 
     slide: function(event, ui) { 

     $("#amount").val("items: " + ui.value); 
     $("#discounted").val("$" + calculateDiscount(ui.value, 40)); 
     } 
    }); 
    $("#amount").val("items: " + $("#slider").slider("value")); 
    }); 

     function calculateDiscount(value,base){ 
     var discounted = (base * value) - 0.1 * (value - 1) * base; 
     return discounted; 
     } 
    </script> 
</head> 
<body> 

<p> 
    <label for="amount">Donation amount ($50 increments):</label> 
    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"> 
     <input type="text" id="discounted" style="border:0; color:#FF0000; font-weight:bold;"> 
</p> 

<div id="slider"></div> 


</body> 
</html> 
+0

是的,對不起,我的數學。你提出的是正確的。 – Jimmy

+0

在這裏,你去了一下,我改了一下你的代碼,但我想你會明白,更新原始答案。 http://jsfiddle.net/kLKxX/ – CodeViking