JQ实现购物车价格计算

Posted 2020-11-18 tc-jieke

　　在购车中我觉得最好使用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)
    }
})

 

)