js购物车计算和删除(较为常见)
主要是执行删除操作的时候，商品数量和小计，需要重新获取才能计算总价。
·
主要是执行删除操作的时候，商品数量和小计，需要重新获取才能计算总价
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>购物车全选功能</title>
<!-- 引入初始化 -->
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: #666;
}
body {
background: #fff;
color: #666;
font-size: 14px;
}
input {
outline: none;
}
.clearfix::before,
.clearfix::after {
content: '';
display: block;
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
<!-- 引入购物车样式 -->
<style>
table {
width: 800px;
margin: 0 auto;
border-collapse: collapse;
}
th {
font: normal 14px/50px '宋体';
color: #666;
}
th,
td {
border: none;
text-align: center;
border-bottom: 1px dashed #ccc;
}
input[type='checkbox'] {
width: 13px;
height: 13px;
}
tbody p {
position: relative;
bottom: 10px;
}
tbody .add,
tbody .reduce {
float: left;
width: 22px;
height: 22px;
border: 1px solid #ccc;
text-align: center;
background: none;
outline: none;
cursor: pointer;
}
tbody input[type='text'] {
width: 50px;
float: left;
height: 18px;
text-align: center;
}
tbody .count-c {
width: 98px;
margin: 0 auto;
}
button[disabled] {
color: #ddd;
cursor: not-allowed;
}
tbody tr:hover {
background: #eee;
}
tbody tr.active {
background: rgba(241, 209, 149, 0.945);
}
.controls {
width: 790px;
margin: 10px auto;
border: 1px solid #ccc;
line-height: 50px;
padding-left: 10px;
position: relative;
}
.controls .del-all,
.controls .clear {
float: left;
margin-right: 50px;
}
.controls p {
float: right;
margin-right: 100px;
}
.controls span {
color: red;
}
.controls .pay {
position: absolute;
right: 0;
width: 80px;
height: 54px;
background: red;
font: bold 20px/54px '宋体';
color: #fff;
text-align: center;
bottom: -1px;
}
.controls .total-price {
font-weight: bold;
}
</style>
</head>
<body>
<div class="car">
<table>
<thead>
<tr>
<th><input type="checkbox" id="all" />全选</th>
<th>商品</th>
<th>单价</th>
<th>商品数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody id="carBody">
<tr>
<td>
<input class="s_ck" type="checkbox" readonly />
</td>
<td>
<img src="./images/01.jpg" />
<p>牛奶</p>
</td>
<td class="price">5￥</td>
<td>
<div class="count-c clearfix">
<button class="reduce" disabled>-</button>
<input type="text" value="1" />
<button class="add">+</button>
</div>
</td>
<td class="total">5￥</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr>
<tr>
<td>
<input class="s_ck" type="checkbox" />
</td>
<td>
<img src="./images/01.jpg" />
<p>牛奶</p>
</td>
<td class="price">10￥</td>
<td>
<div class="count-c clearfix">
<button class="reduce" disabled>-</button>
<input type="text" value="1" />
<button class="add">+</button>
</div>
</td>
<td class="total">20￥</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr>
<tr>
<td>
<input class="s_ck" type="checkbox" />
</td>
<td>
<img src="./images/01.jpg" />
<p>牛奶</p>
</td>
<td class="price">20￥</td>
<td>
<div class="count-c clearfix">
<button class="reduce" disabled>-</button>
<input type="text" value="1" />
<button class="add">+</button>
</div>
</td>
<td class="total">40￥</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr>
<tr>
<td>
<input class="s_ck" type="checkbox" />
</td>
<td>
<img src="./images/01.jpg" />
<p>牛奶</p>
</td>
<td class="price">35￥</td>
<td>
<div class="count-c clearfix">
<button class="reduce" disabled>-</button>
<input type="text" value="1" />
<button class="add">+</button>
</div>
</td>
<td class="total">70￥</td>
<td>
<a href="javascript:" class="del">删除</a>
</td>
</tr>
</tbody>
</table>
<div class="controls clearfix">
<a href="javascript:" class="del-all">删除所选商品</a>
<a href="javascript:" class="clear">清理购物车</a>
<a href="javascript:" class="pay">去结算</a>
<p>
已经选中<span id="totalCount">0</span>件商品;总价：<span id="totalPrice" class="total-price">0￥</span>
</p>
</div>
</div>
<script>
// + -和删除都是相同的，一一对应的 我们完全可以用一个for循环来遍历绑定事件
// +
let adds = document.querySelectorAll('.add') //注意需要拿到全部的+号，使用querySelectorAll
// -
let reduces = document.querySelectorAll('.reduce')
// 删除
let dels = document.querySelectorAll('.del')
// 输入框
let inputs = document.querySelectorAll('.count-c input')
// 单价
let prices = document.querySelectorAll('.price')
// 小计
let totals = document.querySelectorAll('.total')
// 获取总价
let totalResult = document.querySelector('.total-price')
// 获取总件数
let totalCounts = document.querySelector('#totalCount')
// 获取carBody
let carBody = document.querySelector('#carBody')
for (let i = 0; i < adds.length; i++) {
totals[i].innerHTML = prices[i].innerHTML //点击+按钮和—按钮之前！！，，，单价等于总价
//i 意味着获取到全部的+号的长度，进行事件监听之前设置全部的i里面的prices等于totals
// 同时 totals[i].innerHTML=prices[i].innerHTML 只能在for遍历之后，再等于；；如果在for外面等于因为没能获取到具体是哪个，无法赋值
// 1.加号的操作
adds[i].addEventListener('click', function () {
// alert(11)
inputs[i].value++
// ++之后启动减号 因为你++之后数量就不再是1，减号启动
reduces[i].disabled = false
// console.log(typeof prices[0]);
// console.log(prices[i]); //获取第i个的价格，你点击第几个，就获取第几个的价格数据
// console.log(prices[i].innerHTML);
// console.log(parseInt(prices[i].innerHTML)); //parseInt解析为数字整型
// 计算小计
// totals[i].innerHTML = 单价 * 数量
totals[i].innerHTML = parseInt(prices[i].innerHTML) * inputs[i].value + '￥' //后面 + '￥'即可
//计算现在的总额 调用 result()
result()
})
// 2.减号的操作
reduces[i].addEventListener('click', function () {
// alert(11)
inputs[i].value--
// ++之后启动减号 因为你++之后数量就不再是1，减号启动
// reduces[i].disabled = false
// console.log(typeof prices[0]);
// console.log(prices[i]); //获取第i个的价格，你点击第几个，就获取第几个的价格数据
// console.log(prices[i].innerHTML);
// console.log(parseInt(prices[i].innerHTML)); //parseInt解析为数字整型
// 判断如果表单里面的值 小于等于1时则，禁用按钮
if (inputs[i].value <= 1) {
this.disabled = true
}
// 计算小计
// totals[i].innerHTML = 单价 * 数量
totals[i].innerHTML = parseInt(prices[i].innerHTML) * inputs[i].value + '￥' //后面 + '￥'即可
//计算现在的总额 调用 result()
result()
})
// 3. 删除操作
dels[i].addEventListener('click', function () {
// 父元素.removeChild(子元素)
// 找到我们需要删除的元素 tr 这样才能找到需要删除的父级，删除元素需要通过父元素删除
// carBody.removeChild(this.children[i])或者carBody.removeChild(carBody.children[i]) 因为你绑定的是dels[i],你直接使用this或者carBody是不起效果的，需要动态找到该元素进行删除
carBody.removeChild(this.parentNode.parentNode)
// 删除之后，重新调用总件和总价
result()
})
// 计算总价result 函数 把所有的小计totals加起来的结果
function result() {
// 重新获取输入框
let inputs = document.querySelectorAll('.count-c input')
//重新获取小计
let totals = document.querySelectorAll('.total')
let sum = 0
let num = 0
for (let i = 0; i < totals.length; i++) {
// sum = sum + 小计的数字
sum = sum + parseInt(totals[i].innerHTML)
num = num + Number(inputs[i].value) //还可以使用number转换为数字型
}
console.log(num);
totalCounts.innerHTML = num
totalResult.innerHTML = sum + '￥'
}
result()
}
</script>
</body>
</html>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
7
0- 0
已为社区贡献1条内容
所有评论(0)