jQuery 根据选中的复选框/单选按钮更改显示的价格

Question

在我的 WooCommerce 网站上，访问者可以将插件添加到额外收费的产品中。

我正在尝试根据所选插件更新产品页面上显示的价格。

我让它部分工作，但现在我卡住了......在我的代码中计算有效，但我也不知道如何使用小数进行计算。 （例如：1.500,50 + 50 = 1.550,50）

jQuery(document).ready(function ($) {
var prijs = $('.price .amount').text().replace('€', '').replace(',', '');
$('.product-addon input').change(function(){
var x = $(this).closest('input:checked').value;
var total = prijs + x;
$('.price .amount').text(total);
});
});

这是 html 查找价格字段和单选按钮的方式：

<p class="price"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">€</span>1,500.00</span></p>


<input type="radio" class="addon addon-radio" name="addon-401-kleur-0[]" data-raw-price="50" data-price="50" value="rood">

导致价格从“1,500.00 欧元”更新为“150050”。而不是预期的 1550。

另一件事..如何将数字格式化为小数和欧元符号在前面？如果有效，我的基本代码将输出“1550”，但我宁愿将其设为“€1.550,00”。

希望有人能插话;)

Answer 1

您将strings 加在一起，而不是floats。 jQuery 返回的值是 strings (jQuery text() method)，因此被连接起来而不是作为数字相加。

看看parseFloat。

尝试执行以下操作：
var prijs = parseFloat(...)
和
var x = parseFloat(...)

然后在您的 var total = prijs + x 中，您将两个数字相加，这就是您想要的。

至于数字格式，请查看toLocaleString。

例如：

(1550).toLocaleString('en-GB', {style: 'currency', currency: 'GBP', minimumFractionDigits: 2}).replace('£', '€');

给：

€1,550.00