模仿京东购物车实现加减操作
案例描述
如图所示，通过点击加号或者减号按钮会自动计算小计的价格。逻辑非常简单。
在线展示：https://gethtml.cn/project/2020/04/15/index.html
实现过程
逻辑非常简单，获取值计算即可。
- 为两个按钮分别绑定事件
- 改变值
- 返回
代码实现
加号与减号逻辑几乎一样，以加号示例。
首先我们得HTML结构为
<table id="cart">
<tr>
<th><input type="checkbox" name="" id="checkall"> 全选</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="check"></td>
<td>【49元1件88元2件118元3件】富贵鸟春季新品长袖格子男 509灰色 XL</td>
<td>￥<span name="price">2599.00</span></td>
<td>
<button name="minus" disabled>-</button>
<input type="text" name="count" value="1">
<button name="add">+</button>
</td>
<td>￥<span name="subtotal">2599.00</span></td>
<td><a href="#" name="delete">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="check"></td>
<td>【49元1件88元2件118元3件】富贵鸟春季新品长袖格子男 509灰色 XL</td>
<td>￥<span name="price">2599.00</span></td>
<td>
<button name="minus" disabled>-</button>
<input type="text" name="count" value="1">
<button name="add">+</button>
</td>
<td>￥<span name="subtotal">2599.00</span></td>
<td><a href="#" name="delete">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="check"></td>
<td>【49元1件88元2件118元3件】富贵鸟春季新品长袖格子男 509灰色 XL</td>
<td>￥<span name="price">2599.00</span></td>
<td>
<button name="minus" disabled>-</button>
<input type="text" name="count" value="1">
<button name="add">+</button>
</td>
<td>￥<span name="subtotal">2599.00</span></td>
<td><a href="#" name="delete">删除</a></td>
</tr>
</table>- 应该找到每一个加号按钮，并分别为其绑定事件。并且我们需要知道用户到底点击的是哪一个按钮。
// 获取所有加号按钮
var addButtons = document.getElementsByName('add')
for (var i = 0; i < addButtons.length; i++) {
// 因为获取的按钮是一个集合，因此需要取出每一项来添加事件
var addButton = addButtons[i]
// 为每个按钮添加点击事件，传入参数event
addButton.onclick = function (event) {}
}- 接下来要做的就是获取输入框，并改变其值
// 获取当前点击的按钮
var targetButton = event.target
// 操作与之关联的input元素 （存在空白节点问题，所以需要连续向上取两次）
var inputElement = targetButton.previousSibling.previousSibling
// 获取数量（string类型需要转化为Number类型）
var count = Number(inputElement.value)
// 计算
count += 1
// 将值更新到页面
inputElement.value = count
// 获取减按钮（这里需要判断减按钮是否可以被点击）
var minuButton = inputElement.previousSibling.previousSibling
if (count > 1) {
minuButton.removeAttribute('disabled')
} else {
minuButton.setAttribute('disabled', 'disabled')
}- 既然可以改变输入框内容了，那接下来就是要计算小计的价格了。
// 通过当前点击的按钮获取父级节点
var btnTdElement = targetButton.parentNode
// 通过按钮的父级节点获取单价节点
var priTdElement = btnTdElement.previousSibling.previousSibling
// 获取单价
var priceElement = priTdElement.childNodes[1]
// 将单价转换为浮点型
var price = parseFloat(priceElement.firstChild.nodeValue)
// 计算总值
var subtotal = price *= count
// 判断是否有小数点，没有添加
if (String(subtotal).indexOf('.') === -1) {
subtotal = subtotal + '.00'
}
// 通过按钮的父级节点获取下一个兄弟元素即总价节点
var subTdElement = btnTdElement.nextSibling.nextSibling
// 获取总价
var subtotalElement = subTdElement.childNodes[1]
// 改变总价的文本
subtotalElement.textContent = subtotal- 主要功能都完成了，接下来就是细节了，即最前边的复选框和背景颜色
// 通过按钮的父级节点获取父级节点
var trElement = btnTdElement.parentNode
// 通过上一步找到的tr元素节点 获取第一个子节点即复选框节点
var checkTdElement = trElement.childNodes[1]
// 获取复选框节点的input节点
var checkboxElement = checkTdElement.firstChild
// 设置值
checkboxElement.setAttribute('checked', 'checked')
// 将当前这一行的背景颜色修改 #fff4e8
trElement.style.backgroundColor = '#fff4e8'- 至于减按钮功能类似
for (var i = 0; i < minusButtons.length; i++) {
var minusButton = minusButtons[i]
minusButton.onclick = function (event) {
var targetButton = event.target
// 操作与之关联的input元素
var inputElement = targetButton.nextSibling.nextSibling
console.log(inputElement)
// 获取数量（string类型）
var count = Number(inputElement.value)
// 计算
count -= 1
// 将值更新到页面
inputElement.value = count
// 计算小计
var btnTdElement = targetButton.parentNode
var priTdElement = btnTdElement.previousSibling.previousSibling
var priceElement = priTdElement.childNodes[1]
var price = parseFloat(priceElement.firstChild.nodeValue)
var subtotal = price *= count
if (String(subtotal).indexOf('.') === -1) {
subtotal = subtotal + '.00'
}
var subTdElement = btnTdElement.nextSibling.nextSibling
var subtotalElement = subTdElement.childNodes[1]
subtotalElement.textContent = subtotal
// console.log(price)
// 操作减按钮
if (count <= 1) {
targetButton.setAttribute('disabled', 'disabled')
// 复选框
var trElement = btnTdElement.parentNode
var checkTdElement = trElement.childNodes[1]
var checkboxElement = checkTdElement.firstChild
checkboxElement.removeAttribute('checked')
// 将当前这一行的背景颜色修改 #fff4e8
trElement.style.backgroundColor = 'white'
}
}
}完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车案例</title>
<style>
* {
box-sizing: border-box;
}
.cart-container {
margin: 100px auto;
width: 990px;
}
#title {
width: 100px;
color: #c81623;
padding: 10px 0px;
margin: 0;
border-bottom: 1px solid #c81623;
}
#cart {
width: 990px;
border: 1px solid #d9d9d9;
border-collapse: collapse;
}
#cart th,
#cart td {
height: 80px;
border-bottom: 1px solid #d9d9d9;
text-align: center;
}
#cart th {
background: #d9d9d9;
}
#cart td:nth-of-type(1) {
width: 60px;
text-align: center;
}
#cart td:nth-of-type(2) {
width: 400px;
}
#cart td:nth-of-type(3) {
width: 80px;
text-align: right;
}
#cart td:nth-of-type(4) {
width: 250px;
padding: 0 80px;
}
#cart td:nth-of-type(5) {
width: 80px;
text-align: right;
}
#cart td:nth-of-type(6) {
/* width: 80px; */
text-align: center;
}
#cart td:nth-of-type(4) button,
#cart td:nth-of-type(4) input {
display: block;
float: left;
height: 25px;
border: 1px solid #d9d9d9;
}
#cart td:nth-of-type(4) button {
width: 20px;
background-color: #fff;
}
#cart td:nth-of-type(4) input {
padding: 0;
border-width: 1px;
border-left: none;
border-right: none;
width: 50px;
outline: none;
text-align: center;
}
#cart td:nth-of-type(4) input:focus {
background-color: #f1f1f1;
}
#cart td a {
text-decoration: none;
color: #333333;
}
#cart td a:hover {
color: #c81623;
}
</style>
</head>
<body>
<div class="cart-container">
<!-- 购物车标题+商品数量 -->
<h3 id="title">全部商品<span id="number">3</span></h3>
<!-- 购物车表格 -->
<table id="cart">
<tr>
<th><input type="checkbox" name="" id="checkall"> 全选</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="check"></td>
<td>【49元1件88元2件118元3件】富贵鸟春季新品长袖格子男 509灰色 XL</td>
<td>￥<span name="price">2599.00</span></td>
<td>
<button name="minus" disabled>-</button>
<input type="text" name="count" value="1">
<button name="add">+</button>
</td>
<td>￥<span name="subtotal">2599.00</span></td>
<td><a href="#" name="delete">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="check"></td>
<td>【49元1件88元2件118元3件】富贵鸟春季新品长袖格子男 509灰色 XL</td>
<td>￥<span name="price">2599.00</span></td>
<td>
<button name="minus" disabled>-</button>
<input type="text" name="count" value="1">
<button name="add">+</button>
</td>
<td>￥<span name="subtotal">2599.00</span></td>
<td><a href="#" name="delete">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="check"></td>
<td>【49元1件88元2件118元3件】富贵鸟春季新品长袖格子男 509灰色 XL</td>
<td>￥<span name="price">2599.00</span></td>
<td>
<button name="minus" disabled>-</button>
<input type="text" name="count" value="1">
<button name="add">+</button>
</td>
<td>￥<span name="subtotal">2599.00</span></td>
<td><a href="#" name="delete">删除</a></td>
</tr>
</table>
</div>
<!-- 结算 -->
<script>
// 获取到购物车中所有加按钮
var addButtons = document.getElementsByName('add')
var minusButtons = document.getElementsByName('minus')
console.log(minusButtons)
// 事件的绑定 -> 每次只能绑定一个元素
for (var i = 0; i < addButtons.length; i++) {
var addButton = addButtons[i]
// 绑定鼠标事件
// 修改数量
addButton.onclick = function (event) {
console.log('click')
/*
通过event对象获取用户点击的是哪个按钮
* 绑定事件的元素 -> 所有的<botton name='add'>+</botton>
* 触发事件的元素 -> 只能有一个
*/
// console.log(event.currentTarget, event.target, this)
var targetButton = event.target
// 操作与之关联的input元素
var inputElement = targetButton.previousSibling.previousSibling
// console.log(inputElement)
// 获取数量（string类型）
var count = Number(inputElement.value)
// 计算
count += 1
// 将值更新到页面
inputElement.value = count
// 操作与之关联的减按钮
var minuButton = inputElement.previousSibling.previousSibling
if (count > 1) {
minuButton.removeAttribute('disabled')
} else {
minuButton.setAttribute('disabled', 'disabled')
}
// 更新与之关联的小计
// 获取单价
var btnTdElement = targetButton.parentNode
var priTdElement = btnTdElement.previousSibling.previousSibling
var priceElement = priTdElement.childNodes[1]
var price = parseFloat(priceElement.firstChild.nodeValue)
var subtotal = price *= count
if (String(subtotal).indexOf('.') === -1) {
subtotal = subtotal + '.00'
}
var subTdElement = btnTdElement.nextSibling.nextSibling
var subtotalElement = subTdElement.childNodes[1]
subtotalElement.textContent = subtotal
// console.log(price)
// 复选框
var trElement = btnTdElement.parentNode
var checkTdElement = trElement.childNodes[1]
var checkboxElement = checkTdElement.firstChild
checkboxElement.setAttribute('checked', 'checked')
// 将当前这一行的背景颜色修改 #fff4e8
trElement.style.backgroundColor = '#fff4e8'
}
}
for (var i = 0; i < minusButtons.length; i++) {
var minusButton = minusButtons[i]
minusButton.onclick = function (event) {
var targetButton = event.target
// 操作与之关联的input元素
var inputElement = targetButton.nextSibling.nextSibling
console.log(inputElement)
// 获取数量（string类型）
var count = Number(inputElement.value)
// 计算
count -= 1
// 将值更新到页面
inputElement.value = count
// 计算小计
var btnTdElement = targetButton.parentNode
var priTdElement = btnTdElement.previousSibling.previousSibling
var priceElement = priTdElement.childNodes[1]
var price = parseFloat(priceElement.firstChild.nodeValue)
var subtotal = price *= count
if (String(subtotal).indexOf('.') === -1) {
subtotal = subtotal + '.00'
}
var subTdElement = btnTdElement.nextSibling.nextSibling
var subtotalElement = subTdElement.childNodes[1]
subtotalElement.textContent = subtotal
// console.log(price)
// 操作减按钮
if (count <= 1) {
targetButton.setAttribute('disabled', 'disabled')
// 复选框
var trElement = btnTdElement.parentNode
var checkTdElement = trElement.childNodes[1]
var checkboxElement = checkTdElement.firstChild
checkboxElement.removeAttribute('checked')
// 将当前这一行的背景颜色修改 #fff4e8
trElement.style.backgroundColor = 'white'
}
}
}
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-04-15，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录