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>

 

)