Jquery 使用更新的变量进行计算

Question

我正在尝试显示一个动态价格字段，其中价格根据多组选定的单选按钮进行更新。

我让计算工作，但是当用户更改选择时会出现我的问题。

这是我的脚本：

jQuery(document).ready(function ($) {
var prijs = parseFloat($('.summary .price .amount').text().replace('€', '').replace('.', '').replace(',', '.'));
var total;
$('.product-addon-kleur input').change(function(){
var x = parseFloat($(this).closest('input:checked').attr('data-price'));
var total = prijs + x;
var total_decimal = '€'+total.toLocaleString('nl-NL', { minimumFractionDigits: 2 });
$('.summary .price .amount').text(total_decimal);
$('.product-addon input:not(.product-addon-kleur input)').change(function(){
var x2 = parseFloat($(this).closest('input:checked').attr('data-price'));
var new_total = total + x2;
var new_total_decimal = '€'+new_total.toLocaleString('nl-NL', { minimumFractionDigits: 2 });
$('.summary .price .amount').text(new_total_decimal);
});
});
});

如您所见，有多个"单选按钮组"都需要在总数中计算。

但是现在，当用户更改他对第一个单选按钮组的选择(".product-addon-kleur input"(时，我的脚本再次使用起始价格(var total = prijs + x(，不包括在第二组中所做的选择值(var x2(。

如何编写代码以使计算准确工作？

同样在我的版本中，如果第一个函数尚未设置"var total"，则第二个函数不起作用(var new_total = total + x2;(。这意味着用户必须在第一个单选按钮组中进行选择，然后才能更新价格。

如果尚未设置"vartotal"来计算"var new_total = total + x2;"，那么它可以以某种方式回退到"var prijs"会更好

Answer 1

编写一个由两个 onChange 事件触发的函数，该函数在每次更改任何无线电时重新计算所有内容。

function calc1() {
var prijs = parseFloat($('.summary .price .amount').text().replace('€', '').replace('.', '').replace(',', '.'));
var x = parseFloat($('.product-addon-kleur input').closest('input:checked').attr('data-price'));
var total = prijs + x;
var x2 = parseFloat($('.product-addon input:not(.product-addon-kleur input)').closest('input:checked').attr('data-price'));
var new_total = total + x2;
var new_total_decimal = '€'+new_total.toLocaleString('nl-NL', { minimumFractionDigits: 2 });
$('.summary .price .amount').text(new_total_decimal);
}
jQuery(document).ready(function ($) {
calc1();
$('.product-addon-kleur input').change(calc1);
$('.product-addon input:not(.product-addon-kleur input)').change(calc1);
});