mysql 购物车数量_JS购物车(1)-数量增减框

一、背景和需求

在购物车页面中，需要为用户提供调整商品数量的功能

数量增减框由2个button和1个[type=text]的input组成

点击 + 按钮时，数量加一；点击 - 按钮时，数量减一

并更新此商品对应的“小计”

二、HTML代码

三、实现思路

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.le