<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="num1">
<span>商品一</span>
<button class="btnReduce" sign="false">-</button>
<span class="each">0</span>
<button class="btnadd" sign="true">+</button>
<span>价格</span>
<span class="sum">0</span>
</div>
<div id="num2">
<span>商品二</span>
<button class="btnReduce" sign="false">-</button>
<span class="each">0</span>
<button class="btnadd" sign="true">+</button>
<span>价格</span>
<span class="sum">0</span>
</div>
<div id="num3">
<span>商品三</span>
<button class="btnReduce" sign="false">-</button>
<span class="each">0</span>
<button class="btnadd" sign="true">+</button>
<span>价格</span>
<span class="sum">0</span>
</div>
<div>
<span>一共</span>
<span class="pieces">0</span>
<span>件</span>
<span>合计</span>
<span class="countSum">0</span>
</div>
<script type="text/javascript">
var btnReduce = document.getElementsByClassName("btnReduce"),
btnadd = document.getElementsByClassName("btnadd"),
each = document.getElementsByClassName("each"),
sum = document.getElementsByClassName("sum"),
pieces = document.getElementsByClassName("pieces")[0],
countSum = document.getElementsByClassName("countSum")[0],
eachEvery = [0,0,0],eachEverySum = [0,0,0],num = 5,count=0,piecesCount=0;
for(var i=0;i<btnReduce["length"];i++){
btnReduce[i]["onclick"] = btnadd[i]["onclick"] = function(i){
return function(e){
this.getAttribute("sign")=="true" ? eachEvery[i]++ : eachEvery[i]--;
eachEvery[i] < 0 ? eachEvery[i] = 0 : eachEvery[i];
eachEverySum[i] = eachEvery[i] * num;
count = eval(eachEverySum.join("+"));
piecesCount = eval(eachEvery.join("+"));
each[i].innerHTML = eachEvery[i];
sum[i].innerHTML = eachEverySum[i];
countSum.innerHTML = count;
pieces.innerHTML = piecesCount;
}
}(i)
}
</script>
</body>
</html>