简易商品加减
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<p>单价:<span>￥30</span></p>
<input type="button" value="-" class="sub">
<input type="text" value="1">
<input type="button" value="+" class="add">
<p>总价:<span>￥30</span></p>
</div>
<div>
<p>单价:<span>￥666</span></p>
<input type="button" value="-" class="sub">
<input type="text" value="1">
<input type="button" value="+" class="add">
<p>总价:<span>￥666</span></p>
</div>
<div>
<p>单价:<span>￥888</span></p>
<input type="button" value="-" class="sub">
<input type="text" value="1">
<input type="button" value="+" class="add">
<p>总价:<span>￥888</span></p>
</div>
</body>
</html>
<script>
var aAdd = document.querySelectorAll(".add");
var aSub =document.querySelectorAll(".sub")
for(var i=0;i<aAdd.length;i++){
aAdd[i].onclick = function(){
var num = Number(this.previousElementSibling.value); //数量
num++
this.previousElementSibling.value = num; //点击数量加1
var price = this.parentNode.children[0].children[0].innerText.slice(1);//截取单价
this.nextElementSibling.children[0].innerText = "￥"+(price*num) //总价
}
}
for(var i=0;i<aAdd.length;i++){
aSub[i].onclick=function(){
var num=Number(this.nextElementSibling.value);
if(num<=0){
num=1;
price=0;
}
num--
this.nextElementSibling.value=num;
var price=this.parentNode.children[0].children[0].innerText.slice(1);
this.parentNode.children[4].children[0].innerText="￥"+(price*(num));
}
}
</script>
