实现思路
一、搭建html结构，凡是需要操作数值的地方都用一个小盒子划分开（商品选中数量、单价、小计（已选同类商品价值总和）、商品总数、已选商品价值总和、选中商品中最高单价）
二、给每一个加/减操作button绑定一个onclick事件
1、获取当前button的父节点，用于快速找到其他需要操作的节点
2、点击button同类商品选中数量的加/减操作：
1）获取到存放商品数量的元素
2）获取到button属性flag，根据flag属性值判断进行何种运算
3）运算前保存元素中已有值oldNum，并创建变量存放计算所得新值nowNum
4）为避免出现负值，减法操作前首先判断oldNum数值是否大于0，大于0时才进行减法运算
5）将newNum写入元素
3、同类商品价值小计
1）获取存放小计数值的元素
2）获取存放单价的元素中的值（innerText）
3）将计算出的同类商品数量newNum与单价的乘积写入存放小计的元素
4、商品总件数
1）获取存放商品总件数的元素
2）获取到所有存放同类商品数量的元素
3）创建新变量存储商品总数量totalNum
4）for循环求和
5）将totalNum写入存放商品总件数的元素
5、商品总价值（同商品总件数）
6、已选商品中最贵单价
1）获取存放最贵单价的元素
2）获取所有li元素
3）将所有已选类型商品的单价存储入数组：判断这类商品的数量（通过其父元素li获取）是否大于0，只要大于0即将其单价（通过其父元素li获取）push入数组
4）创建新变量存储最贵单价maxMoney
5）如果单价数组中有值，就将数组升序排列并获取其中最大值：判断数组长度是否大于0，大于0将其最大值赋值给maxMoney
6）将maxMoney写入存放最贵单价的元素
具体实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
#main {
width: 479px;
height: 591px;
background: url("images/bg1.png");
margin: 0 auto;
color: #fff;
padding: 30px;
box-sizing: border-box;
position: relative;
}
.shopContent li {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.shopContent button {
width: 52px;
height: 44px;
border: none;
}
.add {
background: url("images/add.png");
}
.sub {
background: url("images/sub.png");
}
.num {
width: 44px;
height: 36px;
line-height: 36px;
text-align: center;
border-radius: 5px;
background: #fff;
color: #333;
}
.shopInfo {
position: absolute;
bottom: 20px;
left: 30px;
}
.shopInfo p {
line-height: 40px;
}
</style>
</head>
<body>
<div id="main">
<ul class="shopContent">
<li>
<button class="add" flag="1"></button>
<b class="num">0</b>
<button class="sub" flag="0"></button>
<span class="info">
单价：<b class="itemPrice">1</b>元 小计：<span class="xjMoney">0</span>元
</span>
</li>
<li>
<button class="add" flag="1"></button>
<b class="num">0</b>
<button class="sub" flag="0"></button>
<span class="info">
单价：<b class="itemPrice">2</b>元 小计：<span class="xjMoney">0</span>元
</span>
</li>
<li>
<button class="add" flag="1"></button>
<b class="num">0</b>
<button class="sub" flag="0"></button>
<span class="info">
单价：<b class="itemPrice">3</b>元 小计：<span class="xjMoney">0</span>元
</span>
</li>
</ul>
<div class="shopInfo">
<p>
商品共<span class="totalNum">0</span>件
</p>
<p>
共花了<span class="totalMoney">0</span>元
</p>
<p>
选中的商品中最贵的单价是<span class="specialItemPrice">0</span>元
</p>
</div>
</div>
</body>
</html>
<script>
/*
点击按钮的时候：让数量相应的增减
怎么知道是加法按钮还是减法按钮？
1.在结构中增加一个自定义属性flag，值1为加法，值0为减法
2.用dom方法获取所有的加法、减法按钮
3.根据li下面的第几个孩子button判断加减法按钮
...
*/
//所有按钮（加、减）
var btns = document.querySelectorAll(".shopContent button");
//所有“件数”盒子
var numArrayEle = document.querySelectorAll(".shopContent .num");
//“总件数”盒子
var totalNumEle = document.querySelector(".shopInfo .totalNum");
//所有“小计”盒子
var xjMoneyArrayEle = document.querySelectorAll(".shopContent .xjMoney");
//“总钱数”盒子
var totalMoneyEle = document.querySelector(".shopInfo .totalMoney");
//li列表
var lis=document.querySelectorAll(".shopContent li");
//“选中商品最贵单价”盒子
var specialItemPriceEle=document.querySelector(".shopInfo .specialItemPrice");
for (var i = 0; i < btns.length; i++) {
//给按钮绑定点击事件
btns[i].onclick = function () {
//获取当前button的flag属性，用于判断是加法还是减法按钮
var flag = this.getAttribute("flag");
//console.log(flag);
//当前button的父节点，通过父节点可以获取需要操作的子盒子
var parentEle = this.parentNode;
//console.log(parentEle);
//单价
var itemPrice = Number(parentEle.querySelector(".itemPrice").innerText);
//console.log(itemPrice);
//“小计”盒子
var xjMoneyEle = parentEle.querySelector(".xjMoney");
//console.log(xjMoneyEle);
//“件数”盒子，点击加/减法按钮影响里面的件数，每次变动 1
var numEle = parentEle.querySelector(".num");
//console.log(numEle);
//记录“件数”盒子中原始数值，用于计算
var oldNum = Number(numEle.innerText);
//console.log(oldNum);
//存放加/减运算后的“新件数”
var nowNum = 0;
//总件数
var totalNum = 0
//总钱数
var totalMoney = 0;
//件数大于0的商品单价数组
var numAry=[];
//选中商品中最贵的单价
//var maxMoney=null;
var maxMoney=0;
//加法按钮
if (flag == 1) {
nowNum = oldNum + 1;
} else {
//减法按钮
/* if (oldNum - 1 < 0) {
nowNum = 0;
return;
}
nowNum = oldNum - 1; */
if(oldNum>0){
nowNum=oldNum-1;
}
}
//修改“件数”盒子中的值为 新件数
numEle.innerText = nowNum;
//修改“小计”盒子中的值为 新件数*单价
xjMoneyEle.innerText = nowNum * itemPrice;
//通过for循环计算总数（拿到每一个件数小盒子中的值进行求和）
for (var i = 0; i < numArrayEle.length; i++) {
//总件数
totalNum += Number(numArrayEle[i].innerText);
//总钱数
totalMoney += Number(xjMoneyArrayEle[i].innerText);
}
//console.log(totalNum);
//修改“总件数”盒子中的数值
totalNumEle.innerText = totalNum;
//通过for循环计算总数（拿到每一个小计盒子中的值进行求和）
/* for(var i=0;i<xjMoneyArrayEle.length;i++){
totalMoney+=Number(xjMoneyArrayEle[i].innerText);
} */
//修改“总钱数”盒子中的数值
totalMoneyEle.innerText = totalMoney;
//获取已选商品的单价数组
for(var i=0;i<lis.length;i++){
var item=lis[i];
//选中的商品（件数大于0）
if(item.querySelector(".num").innerText>0){
//获取单价
var value=item.querySelector(".itemPrice").innerText;
numAry.push(value);
}
}
/*
//未选择商品
if(numAry.length<1){
maxMoney="---";
}else{
//获取已选商品单价数组中的最大值
maxMoney=numAry.sort(function(a,b){return a-b;})[numAry.length-1];
}
*/
if(numAry.length>0){
maxMoney=numAry.sort(function(a,b){return a-b})[numAry.length-1];
}
//修改“选中商品最贵单价”盒子中的值
specialItemPriceEle.innerText=maxMoney;
}
}
</script>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
