javascript - 如何在jquery中进行纯客户端购物车计算？

Question

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

[product image clicked] -> ajax request fetches details from database for that particular product id and appends (product name,id and price automatically appended) via jquery.

[onfocus QTY] -> jquery autocalculates sub total and displays ->

also sends ajax request to calculate total,gst and total payment and this is where the problem begins.

Since the ajax request made onfocus, each time QTY textfield is focused, it goes to the php page and make calculation for total,gst and total payment thus the amount keep increasing beyond logic.

我保存了 session 中传递到 php 页面的所有值。因此，每次 ajax 请求都会携带数量和小总值，并不断添加到 session 中。为了省去麻烦，我想尝试对白色区域进行纯粹的客户端计算，就像我在不发出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>");  
                      }

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>

您必须根据需要更改此设置。