JS购物车(1)

您所在的位置：网站首页 › 小程序加减按钮在哪找 › JS购物车(1)

JS购物车(1)

2024-06-16 10:55| 来源: 网络整理| 查看: 265

一、背景和需求

在购物车页面中，需要为用户提供调整商品数量的功能数量增减框由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 var flag = this.index; //获取当前按钮对应的数量框 var q = document.getElementsByClassName("quantity")[flag]; var newvalue = parseInt(q.value) + 1; q.setAttribute('value', newvalue); //更新此商品对应的‘小计’ changeSum(flag, newvalue); } } //获取所有-按钮 var decrement=document.getElementsByClassName('decrease'); //点击-数量减少的功能函数 for(var j=0;j var flag=this.index; //获取当前a标签对应的那个数量框 var q=document.getElementsByClassName("quantity")[flag]; if(parseInt(q.value)>1) { 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; }

极速模式下正常，在兼容模式下失效。有待解决。

【本文地址】

JS购物车(1)

JS购物车(1)

今日新闻

推荐新闻