js代码首先获取每个元素,因为所有的li元素里的变化相同,所以遍历所有li加动态样式即可
对于合计里的东西而言,每个必须不同判断然后赋值,整体的代码情况如下
<script>
var aLi = document.getElementsByTagName("li");
var aStrong = document.getElementsByTagName("strong");
var aEm = document.getElementsByTagName("em");
var oP = document.getElementsByTagName("p")[0];
var aSpan = oP.getElementsByTagName("span");
var number = 0;
var price = 0;
for(var i=0;i<aLi.length;i++){
Price(aLi[i]);
}
function Price(obj){
var aIn = obj.getElementsByTagName("input");
var oStrong = obj.getElementsByTagName("strong")[0];
var oEm = obj.getElementsByTagName("em")[0];
var oSpan = obj.getElementsByTagName("span")[0];
aIn[0].onclick = function(){
if(oStrong.innerHTML>0){
number--;
oStrong.innerHTML--;
price -= parseFloat(oEm.innerHTML);
oSpan.innerHTML = parseFloat(oEm.innerHTML)*oStrong.innerHTML + "元";
aSpan[0].innerHTML = number;
aSpan[1].innerHTML = price;
aSpan[2].innerHTML = getMax();
}
}
aIn[1].onclick = function(){
number++;
oStrong.innerHTML++;
price += parseFloat(oEm.innerHTML);
oSpan.innerHTML = parseFloat(oEm.innerHTML)*oStrong.innerHTML + "元";
aSpan[0].innerHTML = number;
aSpan[1].innerHTML = price;
aSpan[2].innerHTML = getMax();
}
}
function getMax(){
var arr = [];
for(var i=0;i<aStrong.length;i++){
if(aStrong[i].innerHTML!=0){
arr.push(parseFloat(aEm[i].innerHTML));
}
}
return aStrong == 0 ? 0 : arr.sort(function(a,b){return b-a})[0];
}
</script>
<body>
<ul id="list">
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
单价:<em>12.5元</em>
小计:<span>0元</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
单价:<em>10.5元</em>
小计:<span>0元</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
单价:<em>8.5元</em>
小计:<span>0元</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
单价:<em>8元</em>
小计:<span>0元</span>
</li>
<li>
<input type="button" value="-" />
<strong>0</strong>
<input type="button" value="+" />
单价:<em>14.5元</em>
小计:<span>0元</span>
</li>
</ul>
<p>
商品合计共:<span>0</span>件,共花费了:<span>0</span>元<br />
所购商品中最贵的商品单价是:<span>0</span>元
</p>