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仓库

五、效果图