Jquery计算器底价+ 25%
Jquery计算器底价+ 25%
提问于 2019-06-18 10:44:52
我有一个Jquery计算器。
我的select选项中有价格数据，这是基本价格。
然后我有复选框，它需要增加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>这是我的Jquery
$(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);
}
});现在，它将采取select down选项价格，例如55.00，如果勾选了复选框，则会将25%添加到55.00 = 68.75 (效果很好！)但是，如果勾选了另一个复选框，则它会将25%添加到68.75，而应该将50% (因为勾选了2个复选框)添加到55.00
我总共有3个复选框，可以在选择选项价格的基础上增加25%，
我还注意到，如果我删除了一个复选框，它似乎无法正确修改计算器55 +1复选框= 68.75 +另一个复选框= 89.38取消勾选复选框= 77.34
我该如何着手解决这个问题呢？有人能帮帮忙吗
回答 1
Stack Overflow用户
发布于 2019-06-18 11:25:09
问题是：，你从var price = $("#item-price").html();得到价格，然后你得到总价格的price * .25 25%，而不是从55
用复选框代替click
- You可以将选择器
$("#selector1 , #selector2 , ....").on('change' , calc)
与
- 结合使用
change事件
您可以使用此函数
$(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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56641125
复制相关文章
相似问题
腾讯云开发者
