使用更新的变量进行 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;）。这意味着用户必须在第一个单选按钮组中进行选择，然后价格才会更新。

如果尚未设置“var total”来计算“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);
});