输入字段,计算分层定价

huangapple go评论141阅读模式
英文:

Input field that calculates tier pricing

问题

  1. 当minQty小于100时,我收到"NaN"的消息。最好的情况是这是不可能的,当您尝试将数字降至100时,它会固定在100。即使尝试键入它,它也会切换回100。另一种情况是显示类似"不可能低于100"的消息。默认的起始情况应该是100,并且应该显示价格为100。

  2. 我希望以欧元的形式显示输出,使用逗号分隔,如€257,20,而不是257.20。

我已经在Stackoverflow上找到了类似的解决方案,但无法使其正常工作。

我已经很接近了,但这两个问题很困难。

有人有办法如何完成这两个任务吗?

英文:

I'm trying to create a calculator with Javascript and with the help of JSfiddle I am pretty far but I need some extra's that I am struggling with.

This is the code so far:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

<!-- language: lang-html -->

&lt;input type=&quot;number&quot; id=&quot;quantity&quot; name=&quot;quantity&quot; min=&quot;100&quot; max=&quot;500&quot; value=&quot;100&quot;&gt;
&lt;p id=&quot;price_output&quot;&gt;&lt;/p&gt;

&lt;script src=&quot;https://code.jquery.com/jquery-3.7.0.js&quot; integrity=&quot;sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

I have two issues:

  1. When minQty is lower than 100 I get the message "NaN". The best situation is that this is not possible and when you try to lower the number to 100 it is stuck to 100. Even when to try to type it it will switch back to 100. The other scenario is that there will be dislayed a message like "it is not possible to go lower than 100". Also the default starting situation should be with 100 and the calculated price that should be shown with 100.

  2. I want to display the output in Euro's comma seperated like this: €257,20 and not like 257.20.

I already solutions like this on Stackoverflow:
Change dots to commas

but can't get it to work properly.

I am very close but those two things are hard.

Anybody has an idea how I can accomplish this?

答案1

得分: 1

你可以尝试只使用 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; // 设置最小数量

  $('#quantity').on("input", function() {
    var qty = +this.value;
    if (isNaN(qty) || qty < minQty) {
      this.value = minQty; // 重置值为最小值
      $('#price_output').text("不能低于100");// 显示消息
      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);
  });

  // 触发计算
  $('#quantity').trigger("input");
});
</script>
英文:

You can try the following way using the input event only:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;input type=&quot;number&quot; id=&quot;quantity&quot; name=&quot;quantity&quot; min=&quot;100&quot; max=&quot;500&quot; value=&quot;100&quot;&gt;
&lt;p id=&quot;price_output&quot;&gt;&lt;/p&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.7.0.js&quot; integrity=&quot;sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script&gt;
$(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
$(&#39;#quantity&#39;).on(&quot;input&quot;, function() {
var qty = +this.value;
if (isNaN(qty) || qty &lt; minQty) {
this.value = minQty; //reset value to minimum
$(&#39;#price_output&#39;).text(&quot;It is not possible to go lower than 100&quot;);//show the message
return;
}
var price;
for (var i = 0; i &lt; tier_prices.length &amp;&amp; qty &gt;= tier_prices[i].minQty; i++) {
price = tier_prices[i].unitPrice;
}
var totalPrice = price * qty;
var formattedPrice = &quot;€&quot; + totalPrice.toFixed(2).replace(&quot;.&quot;, &quot;,&quot;);
$(&#39;#price_output&#39;).text(formattedPrice);
});
//trigger the calculation
$(&#39;#quantity&#39;).trigger(&quot;input&quot;);
});
&lt;/script&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月24日 17:52:23
  • 转载请务必保留本文链接:https://go.coder-hub.com/76322222.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定