JQ实现购物车价格计算

　　在购车中我觉得最好使用each()和prop()方法,如果你用事件代理的话也可以实现但是代码有点长还要加入for循环遍历(不建议使用for循环,与优化有关(下面是我实现的方法))

　　以下代码只提供作为思路上方法的参考(如果直接运行是会少一些文件的)

function Shopchar(data){
    this.data=data;
    this.bod=$("#bod");
    this.ckAll=$("#ckAll");
    this.firstc=$(".firstc");
    this.sumpri=$("#sumpri");
    this.set6=$(".set6")
    this.center_page=$(".center_page");
    this.set4=$(".set4")
    this.set3=$(".set3")
    this.set2=$(".set2")
    this.set=$(".set")
    this.set1=$(".set1");
    this.a=0;
    this.sub=true;//用来判断最后的总价计算
    this.init();
}
$.extend(Shopchar.prototype,{
    init:function(){
        this.price_all()
        this.price_a();
        this.check_to();
        this.check_shop()
        this.add_product()
        this.reduce_product()
        this.del_product()
    },
    //商品全选和反选
    //单选按钮价格计算
    price_all:function(ind){
            var b=this.firstc.eq(ind).prop("checked")
            if(b){
            this.a=Number(this.sumpri.html())+parseInt(this.set6.eq(ind).html())
            }if(!b){
                this.a=Number(this.sumpri.html())-parseInt(this.set6.eq(ind).html())
            }
        this.sumpri.html(this.a);
    },
    //全选按钮价格计算
    price_a:function(){
        this.a=0;
        var c=this.ckAll.is("input:checked")
        if(c){
            for(var i=0;i<this.firstc.length;i++){
            this.a+=parseInt(this.set6.eq(i).html());
            }
            this.sumpri.html(this.a);
        }else{
            this.sumpri.html(0);
        }
        
    },
    //全选按钮点击
    check_shop:function(){
        this.ckAll.on("click",$.proxy(this.check_sho,this))
    },
    check_sho:function(event){
        var target=event.target;
        if(target.id=="ckAll"){
        this.firstc.prop("checked",target.checked);
        this.price_a();
        }
    },
    //单选按钮点击
    check_to:function(){
        this.firstc.each($.proxy(this.son_check,this));
    },
    son_check:function(i){
        console.log(i)
        this.firstc.eq(i).on("change",i,$.proxy(this.son_chec,this));
    },
    son_chec:function(even){
        var index=even.data;
        console.log(even,index)
        if(this.firstc.not("input:checked").size()<=0){
            this.ckAll.prop("checked",true)
        }else{
            this.ckAll.prop("checked",false);
        }
        this.price_all(index);
    },
//商品添加和删除
//商品添加(点击+)
    add_product:function(){
        this.set4.each($.proxy(this.add_produc,this))
    },
    add_produc:function(i){
        this.set4.eq(i).on("click",i,$.proxy(this.add_prpdu,this))
    },
    add_prpdu:function(even){
        var index=even.data;
            var i=Number(this.set1.eq(index).val());    
            i++;
            this.set1.eq(index).val(i);
            var price=this.set.eq(index).html();
            console.log(price);
            this.set6.eq(index).html(price*i);
            if(this.firstc.eq(index).prop("checked")){
                this.sumpri.html(Number(this.sumpri.html())+parseInt(price))
            }
    },
    //商品减少(点击-)
    reduce_product:function(){
        this.set2.each($.proxy(this.reduce_produc,this))
    },
    reduce_produc:function(i){
        this.set2.eq(i).on("click",i,$.proxy(this.reduce_prpdu,this))
    },
    reduce_prpdu:function(even){
        var index=even.data;
            var i=Number(this.set1.eq(index).val());    
            i--;
            console.log(i)
            this.set1.eq(index).val(i);
            var price=this.set.eq(index).html();
            console.log(price);
            this.set6.eq(index).html(price*i);
            if(this.firstc.eq(index).prop("checked")){
                this.sumpri.html(Number(this.sumpri.html())-parseInt(price))
            }
    },
    //删除商品(点击删除按钮)
    del_product:function(){
        this.set3.each($.proxy(this.del_produc,this))
    },
    del_produc:function(i){
        this.set3.eq(i).on("click",i,$.proxy(this.del_produ,this))
    },
    del_produ:function(even){
        var index=even.data;
        this.center_page.eq(index).remove();
        this.sumpri.html(Number(this.sumpri.html())-this.set6.eq(index).html)
    }
})

 HTML样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/shopchar.css">
    <link rel="stylesheet" href="../css/quote.css">
    <link rel="stylesheet" href="../css/login.css">
</head>
<body>
    <div id="com_header"></div>    
    <div id="heade">
        <div class="center1">
            <input id="ckAll" type="checkbox">全选
            <span id="shop">商品</span>
            <span id="number">单价</span>
            <span id="unit">数量</span>
            <span id="count">小计</span>
            <span>操作</span>
        </div>
    </div>
    <div id="bod">
<!--         <div class="center">
            <input class="firstc" type="checkbox">
            <img src="../img/img (1).jpg" alt="美酒">
            <div class="dis">
                <span>小米MIX2 全面屏游戏手机 6GB+64GB 黑色 全网通4G手机 双卡
                </span>
            </div>
            <span class="set">¥2899.00</span>
            <button class="set2">-</button>
            <input class="set1" type="text">
            <button class="set4">+</button>
            <span class="set6">¥2899.00</span>
            <button class="set3">删除</button>
        </div> -->
    </div>
    <div class="center_page">
        <div id="bt_right">
            总价:<span id="sumpri">0.00</span>
            <a id="sub" href="##">结算</a>
        </div>
    </div>
</body>
</html>
<!-- 头 -->
<script src="../js/common/jquery.js"></script>
<script src="../js/common/first_regist.js"></script>
<script src="../js/common/com_regist.js"></script>
<script src="../js/common/com_html.js"></script>
<script src="../js/page/regist.js"></script>
<script>new Regist(".com_regis")</script>
<!-- 数据 -->

<script src="../js/page/shop_page.js"></script>
<script src="../js/page/shopchar.js"></script>
<script src="../js/page/shop.js"></script>

 

)