如何在jquery中纯粹实现客户端购物车计算？

以上是我的购物车。下面我显示流程。

[产品图像点击] - > AJAX请求获取通过jQuery从数据库细节对于该特定产品ID和附加（产品名称，ID和价格自动附加）。

[QTY的onfocus] - >的jquery autocalculates子总和显示 - >

还发送AJAX请求计算总，GST和总支付和这就是问题的开始位置。

由于Ajax请求作出的onfocus，每次数量文本框是重点，它关系到PHP页面，并为总，GST 和总付款的计算量。因此不断增加超越逻辑。

我保存传递给会话中的php页面的所有值。所以每次，ajax请求都会携带qty和它总是添加到会话中的子总值。为了节省麻烦，我想尝试纯白色区域的客户端计算，就像我如何计算子总数而不提出Ajax请求。

有什么方法，有人可以给我想法如何为所有项目添加总数量和总计sub_total，而无需发送到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>"); 
         }

来源

2015-12-30 112233

您是否尝试将onchange事件附加到您的量子盒来进行计算，然后事件被解雇？ – Bindrid

由于每个产品的数量和价格都出现在DOM本身内部的客户端，您可以使用jquery在客户端自己计算。在这里发布您的DOM结构 – dreamweiver

@dreamweiver，我在我的文章中加入了我的html和脚本 – 112233

这里是我的方法：

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

你，因为你需要改变这一点。

来源

2015-12-30 18:52:37

你的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 CODE变化处理程序：

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

Live Demo @ JSFiddle

注：上述代码/ DOM结构仅是用于图示客户端计算，所以不要认为它是最终的解决方案。

来源

2015-12-30 11:01:27 dreamweiver

如何在jquery中纯粹实现客户端购物车计算？

回答

相关问题