如何使用千位逗號分隔符格式化計算的數字結果
[英]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.