一、背景和需求
在购物车页面中,需要为用户提供调整商品数量的功能
数量增减框由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="+">
<br>
<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代码
<script>
//获取所有+按钮
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);
}
}
//获取所有-按钮
var decrement=document.getElementsByClassName('decrease');
//点击-数量减少的功能函数
for(var j=0;j<decrement.length;j++)
{
decrement[j].index=j;
decrement[j].onclick=function()
{
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;
}
</script>
极速模式下正常,在兼容模式下失效。有待解决。