javascript - 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 事件触发的函数，它会在每次任何 radio 发生变化时重新计算所有内容。

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);
});