Javascript 选项和单选价值价格计算

Question

有单选按钮和多选选项。他们的数据价值部分有价格。例如：数据值 = "3.10"。我想做的就是这个。在屏幕上打印所选数据的总和。我希望我能告诉。这两个选项给出不同的总价格。我想把两者加起来。  $(document).ready(function() {       var price = 10.09;    var net_fiyat=0;    $('input[type=radio]').on('click',function(){      data= $(this).data('price');      net_fiyat = (parseFloat(price) + parseFloat(data));      console.log(price,data);      console.log(net_fiyat);      $('#total').text(net_fiyat);          });    $(".ekstra").change(function(event) {      var total = 0;      $(".ekstra").select().find(":selected").each(function() {        console.log(this,price);        total += parseFloat($(this).data("price"));      });      if (total == 0) {        $('#total').html('');      } else {       var net_fiyat2 = price + total;         console.log('net2');       $('#total').html(net_fiyat2.toFixed(2));     }   });  }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="col-md-12">          <div class="container">            <div class="row">              <div class="col-md-12 pd-40">               <select multiple data-placeholder="Ekstra Malzeme Seçin.." class="ekstra">                <option data-price="1.10">Pizza Sos</option>                <option data-price="1.10">Beyaz Peynir</option>                <option data-price="1.10">Mozarella Peyniri</option>                <option data-price="1.10">Sucuk</option>                <option data-price="1.10">Sosis</option>              </select>            </div>          </div>        </div>      </div>      <input class="radio-button" type="radio" name="radio" data-price="5.12" />      <input class="radio-button" type="radio" name="radio" data-price="6.50" />      <span class="font-size-27 font-weight-bolds ml-1" id="total">$10.09</span>

Answer 1

您可以有一个变量来计算所有选定的 Ekstras 和一个用于无线电选择价格的变量。然后创建一个打印总结果的函数。

运行代码片段

$(document).ready(function() {   

  var price = 0;

  var ekstras = 0;

  $('input[type=radio]').on('click',function(){

    price = parseFloat($(this).data('price'));

    printTotal();

  });

  $(".ekstra").change(function(event) {

    ekstras = 0;

    $(".ekstra").find(":selected").each(function() {

      ekstras += parseFloat($(this).data("price"));

    });

    printTotal();

  });

  

  // Function to print the total

  function printTotal() {

    var total = ekstras + price;

      

    if (total == 0) {

      $('#total').text('');

    } else {

      var net_fiyat2 = price + total;    

      $('#total').text(total.toFixed(2));

    }

  }

 

});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.full.min.js"></script>

<div class="col-md-12">

  <div class="container">

    <div class="row">

      <div class="col-md-12 pd-40">

        <select multiple data-placeholder="Ekstra Malzeme Seçin.." class="ekstra">

          <option data-price="1.10">Pizza Sos</option>

          <option data-price="1.10">Beyaz Peynir</option>

          <option data-price="1.10">Mozarella Peyniri</option>

          <option data-price="1.10">Sucuk</option>

          <option data-price="1.10">Sosis</option>

        </select>

      </div>

    </div>

  </div>

</div>

<input class="radio-button" type="radio" name="radio" data-price="5.12" />

<input class="radio-button" type="radio" name="radio" data-price="6.50" />

<div>

  <span class="font-size-27 font-weight-bolds ml-1" id="total"></span>

</div>