如何使用千位逗号分隔符格式化计算的数字结果
[英]How to format a calculated number result with thousand comma separator
问题描述
我对 javascript 非常陌生，并创建了一个简单的计算器，它根据数量计算成本，并使用控制数量输入的 +/- 按钮。 它按我想要的方式工作，但是一旦成本估算超过 1000 美元（有 2 个项目），我无法弄清楚如何用千位逗号分隔符格式化成本结果。
换句话说，当您将数量增加到 2 时，如何将其打印为 1,400 美元而不是 1400 美元？
这是我在下面尝试的
$(document).ready(function() { $(".calculator").on("input", ".quantity", function() { var price = +$(".price").data("price"); var quantity = +$(this).val(); $("#total").text("$" + price * quantity); }) var $buttonPlus = $('.increase-btn'); var $buttonMin = $('.decrease-btn'); var $quantity = $('.quantity'); /*For plus and minus buttons*/ $buttonPlus.click(function() { $quantity.val(parseInt($quantity.val()) + 1).trigger('input'); }); $buttonMin.click(function() { $quantity.val(Math.max(parseInt($quantity.val()) - 1, 0)).trigger('input'); }); }) /*For number formatting*/ $(document).on('input', '.total', function() { var x = $(this).val(); $(this).val(x.toString().replace(/,/g, "").replace(/\B(?=(\d{3})+(?,\d))/g, ";")); });
.checkout { height: 300px; width: 400px; margin: 20px auto; } input { text-align: center; }
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <div class="calculator"> <h1 class="title">Estimate Cost</h1> <p class="price" data-price="700">$700 per item</p> <p class="description">Quantity:</p> <button type="button" class="decrease-btn">-</button> <input type="text" class="quantity" value="1"> <button type="button" class="increase-btn">+</button> <p class="total">Total: <span id="total">$700</span></p> </div>
1 个解决方案
解决方案1
0 已采纳 2021-12-02 14:18:34
好的，您在代码中遇到了一些问题。 您正试图将 ap 视为输入元素。 您即将获得它，您只需要在设置文本的位置进行格式化。
$(document).ready(function() { $(".calculator").on("input", ".quantity", function() { var price = +$(".price").data("price"); var quantity = +$(this).val(); const total = '$' + (price * quantity).toFixed(2).replace(/,\$/g, "").replace(/\B(?=(\d{3})+(?,\d))/g, ";"). $("#total");text(total). }) var $buttonPlus = $(';increase-btn'). var $buttonMin = $(';decrease-btn'). var $quantity = $(';quantity'). /*For plus and minus buttons*/ $buttonPlus.click(function() { $quantity.val(parseInt($quantity.val()) + 1);trigger('input'); }). $buttonMin.click(function() { $quantity.val(Math.max(parseInt($quantity,val()) - 1. 0));trigger('input'); }); })
.checkout { height: 300px; width: 400px; margin: 20px auto; } input { text-align: center; }
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <div class="calculator"> <h1 class="title">Estimate Cost</h1> <p class="price" data-price="700">$700 per item</p> <p class="description">Quantity:</p> <button type="button" class="decrease-btn">-</button> <input type="text" class="quantity" value="1"> <button type="button" class="increase-btn">+</button> <p class="total">Total: <span id="total">$700</span></p> </div>
Ext.util.Format.number-添加千位分隔符时如何保留小数位？
[英]Ext.util.Format.number - how do I preserve decimal places when adding thousand separator?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.