实现结果:
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>
<span>衣服：</span>
<button class="jia">+</button>
<strong class="nums">0</strong>
<button class="jian">-</button>
<span>单价：<em class="one">35.5</em>元</span>
<span>总价：<em class="all">0</em>元</span>
</li>
<li>
<span>水果：</span>
<button class="jia">+</button>
<strong class="nums">0</strong>
<button class="jian">-</button>
<span>单价：<em class="one">9.5</em>元</span>
<span>总价：<em class="all">0</em>元</span>
</li>
<li>
<span>肉类：</span>
<button class="jia">+</button>
<strong class="nums">0</strong>
<button class="jian">-</button>
<span>单价：<em class="one">38</em>元</span>
<span>总价：<em class="all">0</em>元</span>
</li>
<li>
<span>海鲜：</span>
<button class="jia">+</button>
<strong class="nums">0</strong>
<button class="jian">-</button>
<span>单价：<em class="one">21</em>元</span>
<span>总价：<em class="all">0</em>元</span>
</li>
<li>
<span>手机：</span>
<button class="jia">+</button>
<strong class="nums">0</strong>
<button class="jian">-</button>
<span>单价：<em class="one">1299</em>元</span>
<span>总价：<em class="all">0</em>元</span>
</li>
</ul>
<script>
var aBtn1=document.getElementsByClassName("jia");
var aBtn2=document.getElementsByClassName("jian");
var aStrong=document.getElementsByClassName("nums");
var aEm1=document.getElementsByClassName("one");
var aEm2=document.getElementsByClassName("all");
for(var i=0;i<aBtn1.length;i++){
// 给加减按钮各自设置一个索引值
aBtn1[i].index=aBtn2[i].index=i;
// 所有加号
aBtn1[i].onclick=function(){
aStrong[this.index].innerHTML++;
aEm2[this.index].innerHTML = aEm1[this.index].innerHTML * aStrong[this.index].innerHTML; //内容原本是字符串，但“*”是数字的隐形转换
}
// 所有减号
aBtn2[i].onclick=function(){
if(aStrong[this.index].innerHTML>0){
aStrong[this.index].innerHTML--;
aEm2[this.index].innerHTML=aStrong[this.index].innerHTML * aEm1[this.index].innerHTML;
}
}
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
