JS購物車(1)-數量增減框

一、背景和需求

在購物車頁面中，需要為用戶提供調整商品數量的功能
數量增減框由2個button和1個[type=text]的input組成
點擊 + 按鈕時，數量加一；點擊 - 按鈕時，數量減一
並更新此商品對應的“小計”

二、HTML代碼

<div class="p-quantity">
       <input type="button" class="decrease" value="-">
       <input type="text" class="quantity" value="1"/>
       <input type="button" class="increase" value="+">
</div>

三、實現思路

1、為每個按鈕添加 index 屬性

購物車內會有多個商品
為確保增減按鈕和數量框一一對應
可以為每個增/減按鈕添加index屬性 用於標記其屬於“第index個商品”

2、為每個按鈕綁定onclick事件，更新數量值

利用增/減按鈕的index值，獲取對應數量框中的value值
利用parseInt方法將value轉換為整型，再加一或者減一
利用setAttribute方法更新數量值

注意 在chrome中調試發現：
直接使用 ele.value=parseInt(ele.value)+1;
會造成數量值只在點擊的一瞬間發生變化

3、調用函數，更新“小計”

在第2步的末尾，將當前按鈕的index值和更新后的數量值傳入自定義的函數changeSum()中
利用parseFloat+toFixed方法保留商品價格的小數點
最后更新“小計”標簽內的HTML文本即可

四、相關的JS代碼

//獲取所有+按鈕
var increment = document.getElementsByClassName("increase");

for (var i = 0; i < increment.length; i++) {
    //為a標簽添加index屬性，用於記錄下標
     increment[i].index = i;

    //點擊+數量增加的功能函數
    increment[i].onclick = function () {
        var flag = this.index;

        //獲取當前按鈕對應的數量框
        var q = document.getElementsByClassName("quantity")[flag];

        var newvalue = parseInt(q.value) + 1;

        q.setAttribute('value', newvalue);

        //更新此商品對應的‘小計’
        changeSum(flag, newvalue);
    }
 }

//更新每個商品的‘小計’
 function changeSum(flag, num) {
    //獲取對應商品單價所在的標簽
    var temp = document.getElementsByClassName("onlyPrice")[flag];

    //獲取商品單價
    var unitPrice = temp.innerHTML;

    //計算新的小計價格
    var newPrice = (parseFloat(unitPrice) * (num*1.0)).toFixed(1);
    //獲取當前“小計”的標簽
    var sum = document.getElementsByClassName("onlySum")[flag];

    sum.innerHTML = newPrice;
 }

完整的源代碼請前往我的github倉庫

五、效果圖