<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0}
em{ font-style:normal}
li{ list-style:none}
#list{ margin:20px auto; 400px;}
#total{text-align:center;}
</style>
<script>
/*
重用代码：
1、尽量保证 HTML 代码结构一致，可以通过父级选取子元素
2、把核心主程序实现，用函数包起来
3、把每组里不同的值找出来，通过传参实现
*/
window.οnlοad=function(){
var oUl=document.getElementById('list');
var oTotal=document.getElementById('total');
var aLi=oUl.getElementsByTagName('li');
for(var i=0; i<aLi.length;i++){
fn1(aLi[i]);
}
function fn1(oLi){
var aBtn = oLi.getElementsByTagName('input');
var oStrong = oLi.getElementsByTagName('strong')[0];
var oEm = oLi.getElementsByTagName('em')[0];
var oSpan = oLi.getElementsByTagName('span')[0];
var n1 = Number(oStrong.innerHTML); // '0' => 0
var n2 = parseFloat(oEm.innerHTML); // '12.5元' => 12.5
var n2 = parseFloat(oEm.innerHTML);
aBtn[0].onclick = function (){
n1 --;
if ( n1 < 0 ) {
n1 = 0;
}
oStrong.innerHTML = n1;
oSpan.innerHTML = n1*n2 + '元';
};
aBtn[1].onclick = function (){
n1 ++;
oStrong.innerHTML = n1;
oSpan.innerHTML = n1*n2 + '元';
};
}
}
</script>
</head>
<ul id="list">
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+"/>
单价：<em>35元</em>小计：<span>0元</span></li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+"/>
单价：<em>12元</em>小计：<span>0元</span></li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+"/>
单价：<em>15元</em>小计：<span>0元</span></li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+"/>
单价：<em>25元</em>小计：<span>0元</span></li>
</ul>
<p id="total">总计<span>0</span>件商品，一共<em>0</em>元</p>
<body>
</body>
</html>