jQuery：计算购物车系统中的价格、总计、运费和增值税

Question

案例：

我正在尝试创建一个购物车系统，该系统将根据订购商品的数量计算价格，然后将其与运费相加，最后计算总计加上增值税价格。

代码：

$(document).ready(function(){

        update_amounts();
        $('.qty').change(function() {
            update_amounts();
        });
    });

function update_amounts()
    {
        var sum = 0.0;
        $('#myTable > tbody  > tr').each(function() {
            var qty = $(this).find('option:selected').val();
            var price = $(this).find('.price').val();
            var amount = (qty*price)
            sum+=amount;
            $(this).find('.amount').text(''+amount);
        });
        //calculate the total to sum  
        $('.total').val(sum);
        //calculate total + shipping and add VAT
        var shipping = $(this).find('.shipping').val();
        var total = $(this).find('.total').val();
        var vat = $(this).find('.vat').val();
        //calculate vat
        var vat_amount = ((total, 10) * 100);
        //calculate grand total
        var total_shipping = (total+shipping);
        var ship_amount = (total_shipping+vat_amount);
        sum+=ship_amount;
        $('.grandTotal').val(sum);
    }

行为：

即使我已经完成工作的第一部分，这也不起作用 fiddle，看不到项目总价的数据变化，也无法计算总计。

预期行为：

当用户点击 Q.ty select 时： - 必须更新行总数计算价格 * 数量 - 总行价格必须更新 - 必须将行价格的总和添加到运费中 - 最后的增值税，根据总行的总和计算必须 return 总计。

Fiddle:

这是一个完整的 fiddle，其中 html 部分经过改编（我正在使用 PHP 脚本来填充 table）https://jsfiddle.net/a1o2nmw8/1/

感谢所有可以合作的人。

Answer 1

你能试试这个吗？？？

 $(document).ready(function(){

            update_amounts();
            $('.qty').change(function() {
                update_amounts();
            });
        });

function update_amounts()
        {
            var sum = 0.0;
            $('#myTable > tbody  > tr').each(function() {
                var qty = $(this).find('option:selected').val();

                var price = $(this).find('.price').html();

                var amount = (qty*price)

                sum+=amount;
            console.log("sum"+sum)
                $('.amount').html(''+amount);

            });
            //calculate the total to sum  
            $('.total').val(sum);
            //calculate total + shipping and add VAT
            var shipping = $('.shipping').val();

            var total = $('.total').val();

            var vat = $('.vat').val();

            //calculate vat
            var vat_amount = ((total, 10) * 100);

            //calculate grand total
            var total_shipping = (total+shipping);

            var ship_amount = (total_shipping+vat_amount);

            sum+=ship_amount;
            $('.grandTotal').val(sum);

        }

Answer 2

在您发布的示例中，您没有使用任何库。试试这个，它对我来说改变了。

更新：还添加了 .toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});总计。

$(document).ready(function(){

        update_amounts();
        $('.qty').change(function() {
            update_amounts();
        });
    });

function update_amounts()
        {
        var sum = 0.0;
        $('#myTable > tbody  > tr').each(function() {
            var qty = $(this).find('option:selected').val();

            var price = $(this).find('.price').text();

            var amount = (qty*price)

            sum+=amount;

            $(this).find('.amount').html(''+amount);

        });
        //calculate the total to sum  
        $('.total').val(sum);
        //calculate total + shipping and add VAT
        var shipping = $('.shipping').val();
        var total = $('.total').val();
        var vat = $('.vat').val();
        //calculate vat
        var vat_amount = ((total*vat)/100);
        //calculate grand total
                var total_shipping  = (parseFloat(total)+parseFloat(shipping));

        var grand_total = (parseFloat(total_shipping)+parseFloat(vat_amount)).toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});;

        $('.grandTotal').val(grand_total);
    }

https://jsfiddle.net/a1o2nmw8/10/

Answer 3

对于select跨度值，需要使用"text()"，然后替换

var price = $(this).find('.price').val();

作者：

var price = $(this).find('.price').text();

然后：

 var shipping = $(this).find('.shipping').val();
 var total = $(this).find('.total').val();
 var vat = $(this).find('.vat').val();

你不需要在这里使用 $(this) ，只需删除并使用 select 或者如下：

 var shipping = $('.shipping').val();
 var total = $('.total').val();
 var vat = $('.vat').val();

最后，添加 parseFloat ：

 var ship_amount = parseFloat(total_shipping+vat_amount);

否则他只是作为一个字符串连接。

Working example

Answer 4

您唯一需要做的就是将 .val() 函数更改为 .text()。

.val() 适用于组合框、文本框等。如果您想获取文本，请使用 .text().

在进行数学运算之前，将文本转换为数字。为此，您可以使用 parsefloat() 或 parseInt() 方法。

Answer 5

$(document).ready(function(){
      update_amounts();
      $('.qty').change(function() {
          update_amounts();
      });
  });

function update_amounts()
  {

    var sum = 0.0;
      $('#myTable > tbody  > tr').each(function() {
       
          var qty = $(this).find('option:selected').val();
          var price = $(this).find('.price').text();
          var amount = (qty*price)
          sum+=amount;
          $(this).find('.amount').text(''+amount);
      });
      //calculate the total to sum  
      $('.total').val(sum);
      //calculate total + shipping and add VAT
      var shipping = $('.shipping').val();
      var total = $('.total').val();
      var vat = $('.vat').val();
      //calculate vat
       var vat_value = ((total*vat)/100);
      //calculate grand total
      
        sub_total = (parseFloat(total)+parseFloat(shipping)).toFixed(1);
        
      var grand_total = (parseFloat(sub_total)+parseFloat(vat_value                    )).toFixed(1);
    
      $('.grandTotal').val(grand_total);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table class="table table-striped" id="myTable">
   <thead>
    <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Desc</th>
    <th>Q.ty</th>
    <th>Price</th>
    <th>Total</th>
  </tr>
   </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>product</td>
        <td>description</td>
        <td><select class="qty" value="500">
        <option value="500">500</option>
        <option value="1000">1000</option>
        </select></td>
        <td><span class="price">50.0</span></td>
        <td><span class="total">0.0</span></td>
      </tr>
    </tbody>
  </table>
  <div class="row">
   <div class="col-sm-3 col-sm-offset-9">
    <table class="table table-striped">
     <tr>
      <td>Total</td>
      <td><input type="text" class="total input" value="0.0" > €</td>
     </tr>
     <tr>
      <td>Shipping</td>
      <td><input type="text" class="shipping input" value="30.0" > €</td>
     </tr>
     <tr>
      <td>VAT</td>
      <td><input type="text" class="vat input" value="22" disabled> %</td>
     </tr>
     <tr>
      <td><strong>Grand Total</strong></td>
      <td><strong><input type="text" class="grandTotal input" value="0.0" disabled> €</strong></td>
     </tr>
    </table>
   </div>

jQuery：计算购物车系统中的价格、总计、运费和增值税

jQuery: calculate price, total, shipping and vat in a cart system

javascript

jquery

sum

percentage