我有一个Jquery计算器。
我的选择选项包含价格数据这是基本价格。
然后我有复选框,需要在基本价格上增加 25%
<select name="howlongcover" class="servicevalue1 howlongcover1" id="servicevalue1">
<option value="none" data-price="0">Pick one!</option>
<option data-price="55" value="valuhowlongcover" data-capacity="24 Months" >24 Months</option>
<option value="valuhowlongcover" data-price="58" data-capacity="36 Months">36 Months</option>
<option value="valuhowlongcover" data-price="71" data-capacity="48 Months" >48 Months</option>
<option value="valuhowlongcover" data-price="119" data-capacity="60 Months">60 Months</option>
</select>
<label><input class="calculate" id="checkboxes" type="checkbox" name="checks" data-price="25"> <span></span> option 1</label><BR>
<label><input class="calculate" id="checkboxes1" type="checkbox" name="checks" data-price="25"> <span></span>option 2</label><BR>
<label><input class="calculate" id="checkboxes2" type="checkbox" name="checks" data-price="25"> <span></span>Option 3</label><BR>
这是我的J查询
$(function(){
$("select.valuservicevalue1").on("change", calc);
$("select.valuservicevalue2").on("change", calc);
$("select.valuservicevalue3").on("change", calc);
$("select.valuservicevalue4").on("change", calc);
$("select.valuservicevalue5").on("change", calc);
$("input[type=checkbox].calculate").on("click", calc);
function calc() {
var basePrice = 0;
newPrice = basePrice;
$("select.valuservicevalue1 option:selected, select.valuservicevalue2 option:selected, select.valuservicevalue3 option:selected, select.valuservicevalue4 option:selected, select.valuservicevalue5 option:selected").each(function () {
newPrice += parseInt($(this).data('price'), 10);
});
$("input[type=checkbox].calculate:checked").each(function () {
var price = $("#item-price").html();
newPrice += price * .25;
});
newPrice = newPrice.toFixed(2);
$("#item-price").html(newPrice);
}
});
现在它将采取选择降低期权价格例如55.00如果勾选复选框,它将增加 25% 至 55.00 = 68.75(效果很好!但是,如果勾选了另一个复选框,则它将 25% 添加到 68.75,而它应该将 50%(因为勾选了 2 个复选框(添加到 55.00
我总共有 3 个复选框,全部用于将选择选项价格增加 25%,
我也刚刚注意到,如果我删除了一个复选框,它似乎没有正确修改计算器55 + 1 复选框 = 68.75 + 另一个复选框 = 89.38 取消选中复选框 = 77.34
我该如何解决这个问题?任何人都可以帮忙吗
问题是:你从var price = $("#item-price").html();
那里得到价格,然后你得到总价格的price * .25
25%
而不是从55
-
此外,使用复选框使用
change
事件而不是click
-
您可以将选择器组合
$("#selector1 , #selector2 , ....").on('change' , calc)
您可以使用此功能
$(function(){
$("select#servicevalue1 , input[type=checkbox].calculate").on("change", calc);
function calc() {
var basePrice = 0;
newPrice = basePrice;
$("select.servicevalue1 option:selected").each(function () {
newPrice += parseInt($(this).data('price'), 10);
});
var percentage = 0;
$("input[type=checkbox].calculate:checked").each(function(){
percentage += parseInt($(this).data('price'), 10);
});
newPrice = newPrice + (newPrice * percentage / 100 );
newPrice = newPrice.toFixed(2);
$("#item-price").html(newPrice);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="howlongcover" class="servicevalue1 howlongcover1" id="servicevalue1">
<option value="none" data-price="0">Pick one!</option>
<option data-price="55" value="valuhowlongcover" data-capacity="24 Months" >24 Months</option>
<option value="valuhowlongcover" data-price="58" data-capacity="36 Months">36 Months</option>
<option value="valuhowlongcover" data-price="71" data-capacity="48 Months" >48 Months</option>
<option value="valuhowlongcover" data-price="119" data-capacity="60 Months">60 Months</option>
</select>
<label><input class="calculate" id="checkboxes" type="checkbox" name="checks" data-price="25"> <span></span> option 1</label><BR>
<label><input class="calculate" id="checkboxes1" type="checkbox" name="checks" data-price="25"> <span></span>option 2</label><BR>
<label><input class="calculate" id="checkboxes2" type="checkbox" name="checks" data-price="25"> <span></span>Option 3</label><BR>
<div id="item-price">0.00</div>