Jquery калькулятор базовая цена + 25% - PullRequest
Новая
       11

Jquery калькулятор базовая цена + 25%

0 голосов
/ 18 июня 2019

У меня есть калькулятор 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>

Вот мой 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);
  }
});

Прямо сейчас будет выбрана цена выбора опциона, например, 55,00. Если флажок установлен, он добавит 25% к 55,00 = 68,75 (работает отлично!) Однако, если другой флажок установленставится галочка, то это добавляет 25% к 68,75, где, как следует добавить, 50% (потому что отмечены два флажка) к 55,00

У меня есть всего 3 флажка, чтобы добавить 25% к цене выбора опции,

Я также только что заметил, что если я убрал флажок, он, кажется, не корректирует калькулятор правильно 55 + 1 флажок = 68,75 + другой флажок = 89,38 снимите флажок = 77,34

Какмогу я починить это?Может кто-нибудь помочь, пожалуйста

1 Ответ

0 голосов
/ 18 июня 2019

Проблема: Вы получаете цену от 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>
...