Question

我想知道是否有人可以解释如何打印滑块的值，并添加数学以折扣变量项。

例如，如果我想这样做：

(40 * NUMBER) - (NUMBER * 0.1)

这基本上会对所显示的每个额外数字应用10％的折扣，而不是1：1的比例。

如果滑块值等于1，则成本为$ 40
如果滑块等于2，则值为$ 76

我能做的最好的办法是在没有折扣的情况下获得总数：

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

有人可以解释我会怎么做吗？

Answer 1

目前还不是很清楚你打算用折扣做什么。

如果我们遵循您的公式

（40 * NUMBER） - （NUMBER * 0.1）

它不匹配示例：

如果滑块值等于1，则成本为40美元如果滑块等于2，则值为$ 76

由于，

Number = 1 - ＆gt; （40 * 1） - （1 * 0.1）= 39.90
Number = 2 - ＆gt; （40 * 2） - （2 * 0.1）= 79.80

我认为你真的是这样的......

（40 * NUMBER） - 0.1 *（NUMBER - 1）* 40

这将是

Number = 1 - ＆gt; （40 * 1） - 0.1 *（1-1）* 40 = 40
Number = 2 - ＆gt; （40 * 2） - 0.1 *（2 - 1）* 40 = 76

是这样的吗？

更新：

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>

Jquery UI滑块变量比例

1 个答案: