从复选框+选择列表中计算总价

时间:2017-03-07 03:01:57

标签: javascript

我想从选择列表+复选框计算总价

此代码显示“tvs”列表中所选元素的价格:

<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>

1 个答案:

答案 0 :(得分:0)

嘿@ 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;
}