Question

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

[点击产品图片] - ＆gt; ajax请求从数据库中获取详细信息   对于该特定产品ID并附加（产品名称，ID和价格   自动附加）通过jquery。

[onfocus QTY] - ＆gt; jquery autocalculates sub total并显示 - ＆gt;

还发送ajax请求来计算总额，支付总额和总支付额   这就是问题的开始。

由于ajax请求是onfocus，每次QTY文本字段都是   专注，它进入PHP页面并计算总，gst   因此，总金额不断增加，超出逻辑。

我保存了会话中传递给php页面的所有值。所以每次，ajax请求都会携带它继续添加到会话中的qty和sub total值。为了省去麻烦，我想尝试纯白色区域的客户端计算，就像我在不进行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

这是我的方法：

public override IMyService CreateProxy(Uri url)
{
    ServiceEndpoint endpoint = CreateEndpoint(url);
    var channelFactory = new ChannelFactory<IMyService>(endpoint);
    InjectResolver(channelFactory.Endpoint);
    return channelFactory.CreateChannel();
}

private void InjectResolver(ServiceEndpoint endpoint)
{
    foreach (OperationDescription operation in endpoint.Contract.Operations)
    {
        var behavior = operation.Behaviors.Find<DataContractSerializerOperationBehavior>();
        behavior.DataContractResolver = new DerivedTypeResolver(); // behavior is null here!
    }
}

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

你必须根据需要改变它。

Answer 2

您的产品DOM结构看起来像这样

HTML CODE：

<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结构仅用于说明客户端计算，因此不要将其视为最终解决方案。

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

2 个答案: