小试购物车，熟练一下dom的增删改查
作者：互联网
最近疫情影响很大，在家也出不去，只能学习啦，下面是效果，废话不多说，直接上代码
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