<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
margin: 0 auto;
}
table {
width: 50%;
margin-top: 30px;
}
th {
background-color: rgb(7, 243, 38);
}
th,
tr {
height: 30px;
text-align: center;
}
</style>
</head>
<body>
<table border="1px" cellspacing="0" cellspacing="0">
<tr>
<th>商品名稱</th>
<th>數量</th>
<th>單價</th>
<th>小計</th>
<th>操作</th>
</tr>
<tr>
<td>水煮魚</td>
<td><button>-</button><span class="goods-num">0</span><button>+</button></td>
<td>單價：<span class="goods-price">50</span></td>
<td>小計：<span class="goods-single-price">0</span></td>
<td>操作：<input type="button" value="刪除" class="sel"></td>
</tr>
<tr>
<td>油燜大蝦</td>
<td><button>-</button><span class="goods-num">0</span><button>+</button></td>
<td>單價：<span class="goods-price">100</span></td>
<td>小計：<span class="goods-single-price">0</span></td>
<td>操作：<input type="button" value="刪除" class="sel"></td>
</tr>
<tr>
<td colspan="5">一共<span id="goods-total-num">0</span>件商品，共計花費<span id="goods-total-price">0</span>元</td>
</tr>
</table>
</body>
</html>
<script>
class Cart {
//計算共有多少件商品
getGoodsnum() {
let OGoodsnum = document.getElementsByClassName("goods-num");
let goodstotalnum = 0;
for (let i = 0; i < OGoodsnum.length; i++) {
goodstotalnum += Number(OGoodsnum[i].innerHTML);
}
let oGoodstotalnum = document.querySelector("#goods-total-num");
oGoodstotalnum.innerHTML = goodstotalnum;
}
//計算共花費多少
getGoodsPrice() {
let Ogoodssingleprice = document.getElementsByClassName("goods-single-price");
let goodstotalprice = 0;
for (var i = 0; i < Ogoodssingleprice.length; i++) {
goodstotalprice += Number(Ogoodssingleprice[i].innerHTML);
}
let Ogoodstotalprice = document.querySelector("#goods-total-price");
Ogoodstotalprice.innerHTML = goodstotalprice;
}
//計算小計
getGoodsSinglePrice(num, price) {
return num * price;
}
//增加貨物數量
Goodadd(btn) {
//獲取btn前的貨物數量
let goodsnum = btn.previousElementSibling;
goodsnum.innerHTML = Number(goodsnum.innerHTML) + 1;
//獲取單價
let Ogoodsprice = btn.parentNode.nextElementSibling.firstElementChild.innerHTML;
//計算小計
let Ogoodssinglepc = this.getGoodsSinglePrice(goodsnum.innerHTML, Ogoodsprice);//50
let goodssingleprice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
goodssingleprice.innerHTML = Ogoodssinglepc;
//點擊增加數量的同時，總數量和總價也要變化
this.getGoodsnum();
this.getGoodsPrice();
}
//減少貨物數量
Goodmin(btn) {
//獲取btn前的貨物數量
let goodsnum = btn.nextElementSibling;
goodsnum.innerHTML = Number(goodsnum.innerHTML) - 1;
//獲取單價
let Ogoodsprice = btn.parentNode.nextElementSibling.firstElementChild.innerHTML;
//計算小計
let Ogoodssinglepc = this.getGoodsSinglePrice(goodsnum.innerHTML, Ogoodsprice);//50
let goodssingleprice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
goodssingleprice.innerHTML = Ogoodssinglepc;
//點擊增加數量的同時，總數量和總價也要變化
this.getGoodsnum();
this.getGoodsPrice();
}
//刪除事件
select(sel) {
let otr = sel.parentNode.parentNode;
otr.remove();
//點擊刪除的同時，總數量和總價也要變化
this.getGoodsnum();
this.getGoodsPrice();
}
//測試綁定事件
testbtn() {
let obtn = document.querySelectorAll("button");
let that = this;
for (let i = 0; i < obtn.length; i++) {
if (i % 2 == 1) {
obtn[i].onclick = function () {
that.Goodadd(this);
}
} else {
obtn[i].onclick = function () {
that.Goodmin(this);
}
}
}
}
//刪除事件
selbtn() {
let oselbtn = document.querySelectorAll(".sel");
let that = this;
for (let i = 0; i < oselbtn.length; i++) {
oselbtn[i].onclick = function () {
that.select(this);
}
}
}
}
var ca = new Cart();
//必須調用才有效果
ca.selbtn();
ca.testbtn()
</script>
