如何在jquery中進行純粹的客戶端購物車計算？

Question

以上是我的購物車。 下面我顯示了流程。

[點擊產品圖片]-> ajax請求從數據庫中獲取該特定產品ID的詳細信息，並通過jquery附加（產品名稱，ID和價格自動附加）。

[onfocus數量]-> jQuery自動計算小計並顯示->

還發送ajax請求以計算總價，消費稅和總價，這就是問題的開始。

由於ajax請求是針對焦點的，因此每次QTY文本字段被關注時，它都會轉到php頁面並計算總金額，gst和總付款，因此金額不斷增加，超出了邏輯范圍。

我在會話中保存所有傳遞給php頁面的值。 因此，每次ajax請求攜帶數量和子總計值時，它都會不斷添加到會話中。 為了避免麻煩，我想嘗試白色區域的純客戶端計算，就像我無需提出ajax請求那樣計算小計的方式一樣。

用什么方式，有人可以讓我知道如何為所有項目添加總數量和總小計，而不必發送到PHP頁面進行計算？ 也許可以給我介紹jQuery數組之類的東西。 我嘗試在線搜索，但聽不懂。

HTML

<form action="#" method="POST" id="cart_form">
<table class='header_tbl' style="background:none !important;">

<thead>
    <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Qty</th>
        <th>Sub Total</th>
        <th></th>
    </tr>
</thead>

    <tbody>
    </tbody>
    <tfoot>

    <tr>
    <td>Total</td><td></td><td><span class='qty_1'></span><input type='hidden' name='total_qty' value=''></td><td><span class='total'></span><input type='hidden' name='total' value=''></td><td></td>
    </tr>

    <tr>
    <td>GST 6%</td><td></td><td></td><td><span class='gst'></span><input type='hidden' name='gst' value=''></td><td></td>
    </tr>

    <tr>
    <td>Discount (x%)</td><td></td><td></td><td></td><td></td>
    </tr>

    <tr>
    <td>Total Payment</td><td></td><td></td><td><span class='grand'></span><input type='hidden' name='grand' value=''></td><td></td>
    </tr>

    <tr><td colspan="5" class="checkout"><input type="submit" name='submit' id="checkout" value="CHECK OUT"/></td></tr>
    </tfoot>



</table>
 </form>

將元素追加到表單的腳本

 for (i = 0; i < data.length; i++) {
                        $(".header_tbl tbody").prepend("<tr id='"+data[i].id+"'><th class='product'>"+data[i].catalog_name+"<input type='hidden' name='catalog_name[]' value='"+data[i].catalog_name+"'></th><td class='price'>RM <span>"+data[i].price_normal+"</span><input type='hidden' name='"+data[i].id+"_price[]' value='"+data[i].price_normal+"'></td><td class='qty_"+data[i].id+"'><input type='text' name='qty' style='width:50px;height:20px;margin:10px auto;' onfocus='subTotal(\""+data[i].id+"\")' value=''><input type='hidden' name='"+data[i].id+"_qty2[]' value=''></td><td class='sub_total'><span class='sub_total_"+data[i].id+"'></span><input type='hidden' name='"+data[i].id+"_sub_total[]' value=''></td><td><img src='"+p_img_path+"del.png' style='width:15px;cursor:pointer;' onClick='del_this(\""+data[i].id+"\")'></td></tr>");  
                      }

Answer 1

這是我的方法：

 $( document ).ready(function() { $(document).on("input paste keyup", ".product_qty", function( event ) { var product_quantity = 0; var product_price = 0; var gst_amount = 0; var sub_total = 0; var total_qty = 0; var grand_total = 0 product_quantity = $(this).val(); product_price = $(this).parent().prev().html(); sub_total = product_price * product_quantity; $(this).parent().next().html(sub_total); $('.product_qty' ).each( function( k, v ) { product_quantity = parseInt ( $(this).val() ) ? parseInt ( $(this).val() ) : 0; product_price = parseFloat($(this).parent().prev().html())?parseFloat($(this).parent().prev().html()):0; console.log(product_quantity); console.log(product_price); sub_total = parseFloat ( product_price * product_quantity ); console.log(sub_total); total_qty +=product_quantity; grand_total += sub_total; }); if ( grand_total > 0 ){ gst_amount = ( grand_total * 6 ) /100; } $("#total_qty").html(total_qty); $("#total_amount").html(grand_total); grand_total +=gst_amount; $("#gst_amount").html(gst_amount); $("#discount_amount").html(0); $("#grand_total").html(grand_total); }); // $(document).on("click", ".delete", function( event ) { var cart_item = 0; $(this).parent().parent().remove(); cart_item = $('.product_qty').length; if ( cart_item <= 0 ) { $("#total_qty").html('0'); $("#total_amount").html('0'); $("#gst_amount").html('0'); $("#discount_amount").html(0); $("#grand_total").html('0'); } else { $('.product_qty').trigger('keyup'); } }); }); // End Document Ready 

  .bs-example{ background: #355979; margin: 20px; } a { color:#FFF; font-weight: bold; } table{ color:#FFF; font-weight: bold; } table input{ color:#000; } .delete{ color:#E13D3D; font-size: 20px; font-weight: bold; } .checkout{ background: #FF002A; } .checkout a{ color: #FFF; font-weight: bold; } 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="bs-example"> <div class="table-responsive"> <table class="table table-bordered"> <colgroup> <col class="con1" style="align: center; width: 30%" /> <col class="con1" style="align: center; width: 20%" /> <col class="con0" style="align: center; width: 20%" /> <col class="con1" style="align: center; width: 20%" /> <col class="con1" style="align: center; width: 10%" /> </colgroup> <thead> <tr> <th>Product</th> <th>Price</th> <th>Quantity</th> <th>Sub Total</th> <th>&nbsp;</th> </tr> </thead> <tbody> <tr> <td>Karpap Pushing Ayu</td> <td class="product_price">5</td> <td><input type="text" name="qty" class="product_qty" value="5"></td> <td class="amount_sub_total">25</td> <td><a href="#" class="delete">x</a></td> </tr> <tr> <td>Slimming Tea</td> <td class="product_price">25</td> <td><input type="text" name="qty" class="product_qty" value="5"></td> <td class="amount_sub_total">125</td> <td><a href="#" class="delete">x</a></td> </tr> <tr> <td>Tudung Shawl Butterfly</td> <td class="product_price">15</td> <td><input type="text" name="qty" class="product_qty" value="3"></td> <td class="amount_sub_total">45</td> <td><a href="#" class="delete">x</a></td> </tr> <tr> <td>Tudung Shawl Butterfly 5</td> <td class="product_price">20</td> <td><input type="text" name="qty" class="product_qty" value="2"></td> <td class="amount_sub_total">40</td> <td><a href="#" class="delete">x</a></td> </tr> <tr> <td>Total</td> <td>&nbsp;</td> <td id="total_qty">15</td> <td id="total_amount">235</td> <td>&nbsp;</td> </tr> <tr> <td>GST 6 %</td> <td>&nbsp;</td> <td>&nbsp;</td> <td id="gst_amount">14.1</td> <td>&nbsp;</td> </tr> <tr> <td>Discount (x%)</td> <td>&nbsp;</td> <td>&nbsp;</td> <td id="discount_amount">&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td>Total Payment</td> <td>&nbsp;</td> <td>&nbsp;</td> <td id="grand_total">249.1</td> <td>&nbsp;</td> </tr> <tr> <td colspan="5" class="checkout"><a href="#">CHECKOUT</a></td> </tr> </tbody> </table> </div> </div> 

您必須根據需要更改此設置。

Answer 2

您產品的DOM結構如下所示

HTML代碼：

<table class='header_tbl'>
 <tr>
   <th>Product</th>
   <th>Price</th>
   <th>Qty</th>
   <th>Sub Total</th>
 </tr>
 <tr class="product_details">
   <td class="product">T-shirt</td>
   <td class="price">
     <input type='text' name='grand' value='300' />
   </td>
   <td class="qty">
     <input type='text' name='grand' value='3' />
   </td>
   <td class="subtotal">
     <input type='text' name='grand' value='' />
   </td>
  </tr>
</table>

用於計算成本的變更處理程序可能看起來像這樣

JS代碼：

$(document).ready(function() {
   $('.header_tbl').on('change', '.price, .qty', function() {
     var pr_price = $(this).closest('.product_details').find('.price input').val();
     var qty = $(this).closest('.product_details').find('.qty input').val();
     var sub_total = pr_price * qty;

     $(this).closest('.product_details').find('.subtotal input').val(sub_total);
  });
});

現場演示@ JSFiddle

注意：以上代碼/ DOM結構僅用於說明客戶端計算，因此請不要將其視為最終解決方案。