问Jquery计算器底价+ 25%
EN

Stack Overflow用户

提问于 2019-06-18 02:44:52

回答 1查看 51关注 0票数 0

我有一个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

我该如何着手解决这个问题呢？有人能帮帮忙吗

javascript

jquery

calculator

有奖征集｜云上CPU玩转AIGC挑战赛

参加活动赢取洛斐键盘、小米电纸书、智能音响等鹅厂周边！

回答 1

Stack Overflow用户

发布于 2019-06-18 03: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>