标签：dom parentNode 改查 innerHTML 购物车 let 小计 小试 btn
最近疫情影响很大，在家也出不去，只能学习啦，下面是效果，废话不多说，直接上代码
ps：明天我会继续改进，后续我会继续改进购物车以及服务器版本的购物车
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 50%;
margin: 30px auto;
border-collapse: collapse;
}
th {
background: hotpink;
height: 2.5em;
margin: 0 auto;
}
tr {
height: 2.5em;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>商品名称</th>
<th>数量</th>
<th>单价</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody class="cart">
<tr>
<td>肉夹馍</td>
<td>
<button type="button">-</button><span class="num">0</span><button type="button">+</button>
</td>
<td>
单价:<span class="price">18</span>
</td>
<td>
小计:<span class="sum">0</span>
</td>
<td>
操作<input class="del" type="button" value="删除" />
</td>
</tr>
<tr>
<td>凉皮</td>
<td>
<button type="button">-</button><span class="num">0</span><button type="button">+</button>
</td>
<td>
单价:<span class="price">16</span>
</td>
<td>
小计:<span class="sum">0</span>
</td>
<td>
操作:<input class="del" type="button" value="删除" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
一共<span class="goods-total-num">0</span>件商品,共计花费<span class="goods-total-price">0</span>元。
</td>
</tr>
</tfoot>
</table>
<table>
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>操作</th>
</tr>
</thead>
<tbody class="store">
<tr>
<td class="name">西红柿</td>
<td>
单价:<span class="single-price">1</span>
</td>
<td>
操作:<input class="add" type="button" value="添加" />
</td>
</tr>
<tr>
<td class="name">鸡蛋</td>
<td>
单价:<span class="single-price">33</span>
</td>
<td>
操作:<input class="add" type="button" value="添加" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
<script>
class Cart {
constructor() {
this.eventBind();
}
//计算总数
getGoodsNum() {
//获取商品数量
let oGoodsNum = document.querySelectorAll(".num");
let totalNum = 0;
for (let i = 0; i < oGoodsNum.length; i++) {
totalNum += Number(oGoodsNum[i].innerHTML);
}
//获取商品总数 赋值
let oGoodsTotalNum = document.querySelector(".goods-total-num");
oGoodsTotalNum.innerHTML = totalNum;
}
//计算总价
getGoodsPrice() {
//获取商品小计
let oGoodsSum = document.querySelectorAll(".sum");
let totalPrice = 0;
for (let i = 0; i < oGoodsSum.length; i++) {
//小计赋值
// oGoodsSum[i].innerHTML = this.getGoodsPrice(oGoodsNum[i],oGoodsPrice[i]);
totalPrice += Number(oGoodsSum[i].innerHTML);
}
//获取商品总价
let oGoodsTotalPrice = document.querySelector(".goods-total-price");
oGoodsTotalPrice.innerHTML = totalPrice;
}
//小计
getGoodsSum(num, price) {
return num * price;
}
//增加货物
addGoods(btn) {
//获取数量并执行加一
let oNum = btn.previousElementSibling;
oNum.innerHTML = Number(oNum.innerHTML) + 1;
//获取价格
let oPrice = btn.parentNode.nextElementSibling.firstElementChild;
//获取小计
let oSum = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
//小计赋值
oSum.innerHTML = this.getGoodsSum(oNum.innerHTML, oPrice.innerHTML);
//更新总数
this.getGoodsNum();
//更新总价
this.getGoodsPrice();
}
//减少货物
disGoods(btn) {
//获取数量并执行减一
let oNum = btn.nextElementSibling;
if (oNum.innerHTML > 0) {
oNum.innerHTML -= 1;
//获取价格
let oPrice = btn.parentNode.nextElementSibling.firstElementChild;
//获取小计
let oSum = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
//小计赋值
oSum.innerHTML = this.getGoodsSum(oNum.innerHTML, oPrice);
//更新总数
this.getGoodsNum();
//更新总价
this.getGoodsPrice();
}
}
//删除货物
delGoods(btn) {
let oTr = btn.parentNode.parentNode;
//删除节点
oTr.remove();
//更新总数
this.getGoodsNum();
//更新总价
this.getGoodsPrice();
}
eventBind() {
let oBtn = document.querySelectorAll("button");
let that = this;
for (let i = 0; i < oBtn.length; i++) {
if (i % 2 == 0) {
oBtn[i].onclick = function() {
that.disGoods(this);
}
} else {
oBtn[i].onclick = function() {
that.addGoods(this);
}
}
}
let oDel = document.querySelectorAll(".del");
for (let i = 0; i < oDel.length; i++) {
oDel[i].onclick = function() {
that.delGoods(this);
}
}
}
}
let c = new Cart();
class Store {
constructor(oCart, oStore) {
this.oCart = oCart;
this.oStore = oStore;
this.eventBind();
}
addCart(btn) {
//生成tr节点并连接节点
let oTr = document.createElement("tr");
this.oCart.appendChild(oTr);
//获取商品名并给拼接购物车添加赋值
let oName = btn.parentNode.parentNode.firstElementChild.innerHTML;
oTr.innerHTML = `<td>${oName}</td>`;
//给购物车拼接添加数量
oTr.innerHTML += `<td><button type="button">-</button><span class="num">0</span><button type="button">+</button></td>`;
//获取商品价格并拼接给购物车添加单价
let oPrice = btn.parentNode.previousElementSibling.firstElementChild.innerHTML;
oTr.innerHTML += `<td>单价:<span class="price">${oPrice}</span></td>`;
//给购物车拼接添加小计
oTr.innerHTML += `<td>小计:<span class="sum">0</span></td>`;
//给购物车拼接添加操作项
oTr.innerHTML += `<td>操作<input class="del" type="button" value="删除" /></td>`;
//更新
c.eventBind();
c.getGoodsNum();
c.getGoodsPrice();
}
eventBind() {
//获取添加
let oBtn = document.querySelectorAll(".add");
let that = this;
for (let i = 0; i < oBtn.length; i++) {
oBtn[i].onclick = function() {
//记录要添加的数据在购物车中是否存在
let flag = false;
//若商品已出现过，记录下标，定义一个变量
let h = 0;
//获取购物车的数据
let oCartNum = that.oCart.children;
//购物车为空时直接添加
if (oCartNum.length == 0) {
that.addCart(this);
} else {
//购物车不为空时
for (let j = 0; j < oCartNum.length; j++) {
//获取要添加的商品名
let oStoreName = this.parentNode.parentNode.firstElementChild.innerHTML;
//获取购物车中的商品名
let oCartName = oCartNum[j].firstElementChild.innerHTML;
//要添加的商品没有出现过
if (oStoreName != oCartName) {
flag = true;
} else {
//要添加的商品已经出现过，记录此条数据在购物车中的下标,并跳出循环
flag = false;
h = j;
break;
}
}
if (flag == true) {
that.addCart(this); //添加数据
} else {
//增加数量
c.addGoods(oCartNum[h].firstElementChild.nextElementSibling.lastElementChild);
}
}
}
}
}
}
let oCart = document.querySelector(".cart");
let oStore = document.querySelector(".store");
let s = new Store(oCart, oStore);
</script>
标签：dom,parentNode,改查,innerHTML,购物车,let,小计,小试,btn 来源： https://www.cnblogs.com/0811thomas/p/15807010.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。