jq实现购物车结算和数量更改功能

 

这是个仿碧欧泉官网的购物车结算页面。

这里仅提供思路和我的代码作参考，代码具体需要看自己的html界面。

其中的难点在于数量的更改以及价格的结算。当出现一个商品时的结算是较为简单的。但是若有多个商品，则每个数量的更改应有对应的价格。

（几乎所有有实际应用功能的购物车都是如此，所以从一开始做的时候就应该往这个方面去想。）

 

 

首先：在html界面写出数量变化的代码，并绑定事件

 

<td class="cart-table-content-td4">
       <input type="button" value="-" onclick="del(this)"/>
       <input type="text" class="text_box" value="1" />
       <input type="button" value="+" onclick="add(this)"/>
 </td>

 

当按下【+】按钮时：

   function add(q){
        var good_num = $(q).parent().find('input[class*=text_box]');　　　　//找到商品数量
        var old_num = $(good_num).val();　　　　　　　　　　　　　　　//获取商品数量的值
        var new_num=parseInt(old_num)+1;　　　　　　　　　　　　　　//商品数量+1
        $(good_num).val(new_num);　　　　　　　　　　　　　　　　　 //商品数量赋值
                // 到这里商品数量的操作已经完成
                
        var one_price=$(q).parent().parent().find(".product-price span").text();  //找到该商品单价
        var new_money=parseInt(one_price)*parseInt((good_num).val());　　//获取单价*数量的总价的值
        var total_price = $(q).parent().parent().find(".font-total-price span");　　//找到该商品总价
        $(total_price).text(new_money);　　　　　　　　　　　　　　　　　//该商品总价赋值
                // 到这里该商品总价的计算操作已经完成
                
        var a= $(".font-total-price span");                //找到所有商品的总价
        var m=0;                                                                    //遍历,获取,将字符串转化为数字,并相加
        for(var i=0;i<a.length;i++){
            m+=Number(a[i].textContent);
        }
        $("#all_price").text("￥"+m);                //赋值给总商品价格
        $("#all_total_price").text("￥"+m);    //赋值给总价
                //到这里商品总结算已经完成
    }

 当按下【-】按钮时：（思路与【+】相似，不同之处是多了一个判断，商品数量不能小于1）

function del(q){
        var good_num = $(q).parent().find('input[class*=text_box]');
        var old_num = $(good_num).val();
        var new_num=parseInt(old_num)-1;
        $(good_num).val(new_num);
        if(new_num<1){
                alert("再减就没有了！");
                $(good_num).val(1);;
        }
    var one_price=$(q).parent().parent().find(".product-price span").text();
    var new_money=parseInt(one_price)*parseInt((good_num).val());
    var total_price = $(q).parent().parent().find(".font-total-price span");
    $(total_price).text(new_money);
    var a= $(".font-total-price span");
    var m=0;
    for(var i=0;i<a.length;i++){
        m+=Number(a[i].textContent);
    }
    $("#all_price").text("￥"+m);
    $("#all_total_price").text("￥"+m);
    }