javascript - 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 的第一部分，这也不起作用，看不到项目总价的数据变化，也无法计算总计。

预期行为:

当用户单击“数量”时，选择:- 必须更新行总计，计算价格 * 数量- 总行价格必须更新- 行价格的总和必须添加到运费中- 最后，根据总行总和计算的增值税必须返回总计。

fiddle :

这里是一个完整的 html 部分改编的 fiddle (我使用 PHP 脚本来填充表格)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').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>