jquery 计算分层定价的输入字段

pcrecxhr 于 2023-05-28 发布在 jQuery

关注(0)|答案(1)|浏览(236)

我试图创建一个计算器与Javascript和Jsfiddle的帮助下，我相当远，但我需要一些额外的，我正在挣扎。
这是到目前为止的代码：

$(function() {
  var tier_prices = [
        { minQty: 100, unitPrice:2.57 },
        { minQty: 150, unitPrice:1.86 },
        { minQty: 200, unitPrice:1.50 }
  ];
  $('#quantity').on("change input keyup", function() {
    var qty = +this.value;
    var price;
    for (var i = 0; i < tier_prices.length && qty >= tier_prices[i].minQty; i++) {
      price = tier_prices[i].unitPrice;
    }
    $('#price_output').text(price * qty);
  });
});

<input type="number" id="quantity" name="quantity" min="100" max="500" value="100">
<p id="price_output"></p>

<script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>

我有两个问题：
1.当minQt小于100时，我得到消息“NaN”。最好的情况是，这是不可能的，当你试图将数字降低到100时，它被卡住了。即使尝试输入它，它也会切换回100。另一种情况是，将显示类似“不可能低于100”的消息。此外，默认的起始情况应该是100，计算出的价格应该显示为100。
1.我想用欧元的逗号分隔显示输出，这样：257.20欧元，不像257.20。
我已经在Stackoverflow上这样的解决方案：Change dots to commas
却无法正常工作
我很接近，但这两件事很难。
有谁知道我怎么能做到这一点？

jquery

来源：https://stackoverflow.com/questions/76322222/input-field-that-calculates-tier-pricing

1条答案

按热度按时间

6qftjkof1#

您可以尝试以下方法，仅使用 input 事件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="quantity" name="quantity" min="100" max="500" value="100">
<p id="price_output"></p>
    <script src="https://code.jquery.com/jquery-3.7.0.js" integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=" crossorigin="anonymous"></script>
<script>
$(function() {
  var tier_prices = [
    { minQty: 100, unitPrice: 2.57 },
    { minQty: 150, unitPrice: 1.86 },
    { minQty: 200, unitPrice: 1.50 }
  ];
  var minQty = 100; //set the minimum quantity

  $('#quantity').on("input", function() {
    var qty = +this.value;
    if (isNaN(qty) || qty < minQty) {
      this.value = minQty; //reset value to minimum
      $('#price_output').text("It is not possible to go lower than 100");//show the message
      return;
    }
    var price;
    for (var i = 0; i < tier_prices.length && qty >= tier_prices[i].minQty; i++) {
      price = tier_prices[i].unitPrice;
    }
    var totalPrice = price * qty;
    var formattedPrice = "€" + totalPrice.toFixed(2).replace(".", ",");
    $('#price_output').text(formattedPrice);
  });

  //trigger the calculation
  $('#quantity').trigger("input");
});

</script>

赞(0）回复(0）举报 2023-05-28

我来回答

jquery 计算分层定价的输入字段

1条答案

相关问题

热门标签

最新问答