通過復選框+選擇列表計算總價

Question

我想從選擇列表+復選框中計算總價格

此代碼顯示了從列表“電視”中所選元素的價格：

<script type="text/javascript">
 $(document).ready(function () {
var cheap = false;
$('#tvs').change(function () {
    var price = parseFloat($('.total').data('base-price')) || 0;
    $('#tvs').each(function (i, el) {
        price += parseFloat($('option:selected', el).data(cheap ? 'cheap' : 'price'));
        console.log('x', price)
        $('.total').val(price.toFixed(2) + '' + '$');
       });
       });
        });
</script>



 <input placeholder="0.00$" style=" width: 65px; border: 0px;" class="total" data-base-price="0" readOnly>

此代碼顯示已選中復選框的價格：

      <script type="text/javascript">
      function update_amounts_modal() {
var sum = 0.0;
$('form').each(function () {
    var qty = $(this).find('.qty').val();
    var price = $(this).find('.price').val();
    var isChecked = $(this).find('.idRow').prop("checked");
    if (isChecked){
        qty = parseInt(qty, 10) || 0;
        price = parseFloat(price) || 0;
        var amount = (qty * price);
        sum += amount;
    }
});
$('.total-modal').text(sum.toFixed(2) + ' ' + '$');


    $().ready(function () {
update_amounts_modal();
$('form .qty, form .idRow').change(function () {
    update_amounts_modal();
    });
     });
 </script>


<div id="subusers" class="total-modal">0.00 $</div>

Answer 1

嘿@ musa94我假設您有一個相當大的應用程序，並且將代碼分成文件，並且找到了一種方法來匯總不同代碼塊中的兩個值。 一種無需更改太多現有代碼的簡單方法是定義一個共享數據對象，該對象包含您想要在整個應用程序中處理的值。 您可以通過訪問數據對象中的值來對列表中的值求和，然后向上選中復選框。

// define a data object that exists in your application
window.__ =  window.__ || { data: { total: 0, modal: 0 } };

$(document).ready(function () {
  var cheap = false;

  $('#tvs').change(function () {
    var total = getTvsTotal(cheap);
    // update your view
    $('.total').val(total.toFixed(2) + '' + '$');
    // update your data object
    __.data.total = total;
    console.log('review data object', __);
  });
});

$(document).ready(function () {
  $('form .qty, form .idRow').change(function () {
    var total = update_amounts_modal();
    $('.total-modal').text(total.toFixed(2) + ' ' + '$');

    __.data.modal = total;
    console.log('review data object', __);
  });
});

/**
 * calculate your tvs total
 * @param {boolean}
 * @return {number}
 */
function getTvsTotal(cheap) {
  var price = parseFloat($('.total').data('base-price')) || 0;

  $('#tvs').each(function (i, el) {
      price += parseFloat($('option:selected', el).data(cheap ? 'cheap' : 'price'));
      console.log('list total:', price);      
  });

  return price;
}

/**
 * calculate your amounts modal
 * @return {number}
 */
function update_amounts_modal() {
  var sum = 0.0;

  $('form').each(function () {
    var qty = $(this).find('.qty').val();
    var price = $(this).find('.price').val();
    var isChecked = $(this).find('.idRow').prop("checked");
    var amount;

    if (isChecked){
      qty = parseInt(qty, 10) || 0;
      price = parseFloat(price) || 0;
      amount = qty * price;
      sum += amount;
    }
    console.log('sum:', sum);
  });

  return sum;
}