jQuery實現購物車商品數量及總價的計算

記錄一下項目中遇到的計算購物車商品數量和總價的jQuery代碼，重點在於選擇器以及.text()命令的使用。

先上效果圖，點擊加減，商品數量以及總價會發生相應變化。

html代碼：

<div class="addGoods">
      <div class="goods_list">
          <ul>
            <li><img class="goods_img" src="../img/goods1.png"><p>木林森男鞋</p>
            <div class="goods_bottom">¥<span class="goods_price">198.00</span><div class="num"><img class="minus" src="../img/minus.png" /><span>0</span><img class="plus" src="../img/plus.png"></div></div></li>
            <li><img class="goods_img" src="../img/goods2.png"><p>Meizu/魅族 魅藍E2</p>
            <div class="goods_bottom">¥<span class="goods_price">1200.00</span><div class="num"><img class="minus" src="../img/minus.png" /><span>0</span><img class="plus" src="../img/plus.png"></div></div></li>  
            <li><img class="goods_img" src="../img/goods3.png"><p>清風傲骨茶倉</p>
            <div class="goods_bottom">¥<span class="goods_price">254.00</span><div class="num"><img class="minus" src="../img/minus.png" /><span>0</span><img class="plus" src="../img/plus.png"></div></div></li>  
            <li><img class="goods_img" src="../img/goods4.png"><p>農家小米糯米鍋巴</p>
            <div class="goods_bottom">¥<span class="goods_price">22.90</span><div class="num"><img class="minus" src="../img/minus.png" /><span>0</span><img class="plus" src="../img/plus.png"></div></div></li>  
            <li><img class="goods_img" src="../img/goods5.png"><p>安德瑪 UA男子 Curry3</p>
            <div class="goods_bottom">¥<span  class="goods_price">7.00</span><div class="num"><img class="minus" src="../img/minus.png" /><span>0</span><img class="plus" src="../img/plus.png"></div></div></li>    
          </ul>
          <div class="pay">共計<span class="totalNum">0</span>件
          <p>總價¥<span class="totalPrice">0</span></p><button type="submit">去付款</button></div>
      </div>
</div>  

列表部分CSS代碼：

.goods_list ul li{
    background-color: #FFF;
    border-bottom: 1px solid #CCC;
    height: 260px;
    padding: 40px;
}
.goods_img{
    float: left;
    border: 1px solid #CCC;
    margin-right: 20px;
    width: 180px;
    height: 180px;
}
.goods_bottom{
    padding-top: 52px;
}
.goods_bottom .price{
    color: #F02028;
}
.goods_list .num{
    float: right;
}
.goods_list .num span{
    padding: 0 30px;
}
.pay {
    padding-left: 30px;
    background-color: #FFF;
    width: 100%;
    height: 166px;
    position: fixed;bottom: 0;
}
.pay .totalNum{
    color: #F02028;
}
.pay p{
    color: #F02028;
}
.pay button{
    position: fixed;bottom:0;right: 0;
    width: 300px;
    height: 166px;
    background-color: #FF3334;
    color: #FFF;
    font-size: 45px;
}

點擊按鈕后，需要改變的地方有三處，列表里加減中間的數字，底部的totalNum和totalPrice。

jQuery代碼：

$(document).ready(function(){
//點擊增加按鈕觸發事件
    $(".plus").click(function(){
        var num = $(this).parent().children("span");
//單品數量增加
        num.text(parseInt(num.text())+1);
//商品總數增加
        var totalNum = parseInt($(".totalNum").text());
        totalNum++
        $(".totalNum").text(totalNum);
//計算總價
        var goods_price = parseInt($(this).parent().parent().children(".goods_price").text());
        $(".totalPrice").text(parseInt($(".totalPrice").text())+goods_price);
    });

//點擊減少按鈕觸發事件
     $(".minus").click(function(){
        var num = $(this).parent().children("span");
        if(parseInt(num.text())){
        num.text(parseInt(num.text())-1);
        var totalNum = parseInt($(".totalNum").text());
        totalNum--
        $(".totalNum").text(totalNum);
        var goods_price = parseInt($(this).parent().parent().children(".goods_price").text());
        $(".totalPrice").text(parseInt($(".totalPrice").text())-goods_price);
    } else{
        num.text("0");
    }
    });
 });

值得注意的有以下幾點：

1. .parent()函數用於選取每個匹配元素的父元素，並以jQuery對象的形式返回;.parent()函數用於選取每個匹配元素的子元素, .find 和 .children() 方法類似，不過后者只沿着 DOM 樹向下遍歷單一層級。

2. text()函數用於返回或設置當前jQuery對象所匹配的DOM元素內的text內容，且該值為字符串類型，所以要用parseInt()轉換為整數類型才可以進行計算。

3. 需要添加單品數量小於0時的處理，防止出現負數。

 

PS：選擇器用得過於繁瑣，存在改進空間。