我无法提出以下逻辑。我有两个复选框,每个复选框内有两个数据价格值。一个是solo-price
,如果只选中一个复选框,我想使用它。然后,如果选中了两个复选框,我想要使用combined-price
...想想捆绑定价。
我有两个问题,都与合并定价有关。
- 当选中这两个复选框时,我无法弄清楚如何使用组合定价显示在package1-review-price
或package2-price-review
div中。基本上重写以下变量。
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'));
});
}
有没有人看到我的逻辑有什么问题?
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>
答案 0 :(得分: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));
}