javascript - 根据更改选择获取替代数据值

Question

我无法想出以下逻辑。我有两个复选框，每个复选框中有两个数据价格值。一种是 solo-price，如果只选中一个复选框，我想使用它。然后我有一个combined-price，如果两个复选框都被选中，我想使用它......想想捆绑定(bind)价。

我遇到两个问题，都与合并定价有关。

-当两个复选框都被选中时，我无法弄清楚如何使用组合定价显示在 package1-review-price 或 package2-price-review 中分区。基本上重写了以下变量。

var package1Price = [];
var package2Price = [];

-那么我的第二个问题与上面的问题直接相关。当两个复选框均被选中时，总计为solo-price 和combination-price 的总和。显示总额为 46 美元，而实际应该是 21 美元。

在 calcTotalPrice 函数中，我尝试嵌套总计命令，如下所示...但没有帮助。

if ($('#package2').not(':checked') && $('#package1').is(':checked')) {
        $('#package1:checked').each(function() {
          totalPrice += parseInt($(this).data('solo-price'));
        });
      }  

有人看出我的逻辑有什么问题吗？

Here is a fiddle.

    var package1Price = [];
    var package2Price = [];

    $('.product-check').on('change', function() {
      if ($('#package1').is(':checked') && $('#package2').is(':checked')) {
				$('#packages-selected').toggle(100).html('Both packages selected');
      }
      if ($('#package2').not(':checked') && $('#package1').is(':checked')) {
        //Package 1 single Price
        var str = $('#package1:checked').map(function() {
          return "$" + $(this).data('solo-price');
        }).toArray().join(" ");
        $('#product1-price-review').toggle().html(str);
        calcTotalPrice();
        //$('#packages-selected').toggle(100).html('Package 1 Selected');
      }
      else if ($('#package1').not(':checked')) {
      	$('#product1-price-review').toggle();
        package1Price = 0;
      }
      if ($('#package1').not(':checked') && $('#package2').is(':checked')) {
        var str = $('#package2:checked').map(function() {
          return "$" + $(this).data('solo-price');
        }).toArray().join(" ");
        $('#product2-price-review').html(str);
        $('#product1-price-review').hide();
        calcTotalPrice();
        // $('#packages-selected').toggle(100).html('Package 2 Selected');
      }
      else if ($('#package2').not(':checked')) {
      	$('#product2-price-review').hide();
         package2Price = 0;
      }
    });

    function calcTotalPrice() {
      var totalPrice = 0;
      var tpPrice = 0;
      $('#package1:checked').each(function() {
        totalPrice += parseInt($(this).data('solo-price'));
      });
      $('#package2:checked').each(function() {
        tpPrice += parseInt($(this).data('solo-price'));
      });
      if ($('#package1').is(':checked') && $('#package2').is(':checked')) {
        $('#package1:checked,#package2:checked').each(function() {
          tpPrice += parseInt($(this).data('combined-price'));
        });
      }
      $('#package-review-total').html("Total $ " + (totalPrice + tpPrice));
    }

#packages-selected, #product1-price-review, #product2-price-review {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="product-check" id="package1" value="Product 1" data-solo-price="10" data-combined-price="8">
<input type="checkbox" class="product-check" id="package2" value="Product 2" data-solo-price="15" data-combined-price="13">
<p id="product1-price-review"></p>
<p id="product2-price-review"></p>
<p id="package-review-total"></p>
<p id="packages-selected"></p>

Answer 1

问题出在您的 calcTotalPrice() 函数中。请注意，即使您选中这两个复选框，您也会添加 solo-prices 值，因此总计为 46 美元 (10 + 15 + 8 + 13 = 46)，而不是想要 21 美元。

尝试应该可以解决问题:

function calcTotalPrice() {
  var totalPrice = 0;
  var tpPrice = 0;

  if ($('#package1').is(':checked') && $('#package2').is(':checked')) {
    $('#package1:checked,#package2:checked').each(function() {
      tpPrice += parseInt($(this).data('combined-price'));
    });
  } else {
    $('#package1:checked').each(function() {
      totalPrice += parseInt($(this).data('solo-price'));
    });
    $('#package2:checked').each(function() {
      tpPrice += parseInt($(this).data('solo-price'));
    });
  }
  $('#package-review-total').html("Total $ " + (totalPrice + tpPrice));
}