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);
    }

行为：

即使我已经采取了工作小提琴的第一部分，也无法工作，看不到项目总价格的数据变化，也无法计算总计

预期行为：

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

小提琴：

以下是改编的html部分的完整小提琴（我使用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>

Answer 2

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

UPDATED：还添加.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

你能试试吗???

 $(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 4

对于选择范围值，您需要使用“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），只需删除并使用选择器，如下所示：

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

最后，添加parseFloat：

 var ship_amount = parseFloat(total_shipping+vat_amount);

否则他只是串起来。

Working example

Answer 5

您唯一需要做的就是使用.val()更改.text()功能。

.val（）可以与组合框，文本框等一起使用。如果你想使用.text()来获取文本。

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

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

5 个答案: