如何使用千位逗号分隔符格式化计算的数字结果
[英]How to format a calculated number result with thousand comma separator
问题描述
I'm very new to javascript and created a simple calculator that calculates cost based on quantity with +/- buttons controlling the quantity input.
我对 javascript 非常陌生，并创建了一个简单的计算器，它根据数量计算成本，并使用控制数量输入的 +/- 按钮。 It works how I want it to, but I can't figure out how to format the cost result with thousand comma separators once the cost estimate exceeds $1000 with 2 items.它按我想要的方式工作，但是一旦成本估算超过 1000 美元（有 2 个项目），我无法弄清楚如何用千位逗号分隔符格式化成本结果。
In other words, when you increase quantity to 2, how do you get it to print as $1,400 instead of $1400?换句话说，当您将数量增加到 2 时，如何将其打印为 1,400 美元而不是 1400 美元？
Here's what I tried below这是我在下面尝试的
$(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
Okay you have some problems in the code.好的，您在代码中遇到了一些问题。 You are trying to treat ap as an input element.您正试图将 ap 视为输入元素。 You are close to getting it, you just need to do the formatting where you set the text.您即将获得它，您只需要在设置文本的位置进行格式化。
$(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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.