jQuery基础教程(十六)
购物车综合案例
使用jQuery模拟实现一个购物车效果。
实现代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>jQuery基础教程之综合实例-购物车效果</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#main, #cart, #top {
width: 780px;
height: auto;
margin: 0px auto;
}
img {
cursor: pointer;
}
#cart table {
width: 100%;
border: 1px solid #ccc;
border-collapse: collapse;
}
#cart table td {
text-align: center;
}
</style>
</head>
<body>
<h1 style="text-align: center">购物车</h1>
<hr>
<div id="main">
<div id="cart">
<table id="cartlist">
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr>
<td>100</td>
<td>农夫山泉</td>
<td>2</td>
<td><img src="images/taobao_minus.jpg" class="subNum"/> <input type="text" value="15" readonly
style="width: 20px"/> <img
src="images/taobao_adding.jpg" class="addNum"/></td>
<td class="xj">30</td>
<td><input type="button" value="删除" onclick='deleteItem(this)'/></td>
</tr>
<tr>
<td>101</td>
<td>康师傅方便面</td>
<td>5</td>
<td><img src="images/taobao_minus.jpg" class="subNum"/> <input type="text" value="10" readonly
style="width: 20px"/> <img
src="images/taobao_adding.jpg" class="addNum"/></td>
<td class="xj">50</td>
<td><input type="button" value="删除" onclick='deleteItem(this)'/></td>
</tr>
<tr>
<td>102</td>
<td>双汇火腿肠</td>
<td>8</td>
<td><img src="images/taobao_minus.jpg" class="subNum"/> <input type="text" value="5" readonly
style="width: 20px"/> <img
src="images/taobao_adding.jpg" class="addNum"/></td>
<td class="xj">40</td>
<td><input type="button" value="删除" onclick='deleteItem(this)'/></td>
</tr>
<tr>
<td>104</td>
<td>清风卫生纸</td>
<td>10</td>
<td><img src="images/taobao_minus.jpg" class="subNum"/> <input type="text" value="10" readonly
style="width: 20px"/> <img
src="images/taobao_adding.jpg" class="addNum"/></td>
<td class="xj">100</td>
<td><input type="button" value="删除" onclick='deleteItem(this)'/></td>
</tr>
<tr>
<td>105</td>
<td>清心口香糖</td>
<td>13</td>
<td><img src="https://img.simoniu.com/taobao_minus.jpg" class="subNum"/> <input type="text" value="2" readonly
style="width: 20px"/> <img
src="https://img.simoniu.com/taobao_adding.jpg" class="addNum"/></td>
<td class="xj">26</td>
<td><input type="button" value="删除" onclick='deleteItem(this)'/></td>
</tr>
<tr>
<td>106</td>
<td>黑人牙膏</td>
<td>12</td>
<td><img src="images/taobao_minus.jpg" class="subNum"/> <input type="text" value="2" readonly
style="width: 20px"/> <img
src="images/taobao_adding.jpg" class="addNum"/></td>
<td class="xj">24</td>
<td><input type="button" value="删除" onclick='deleteItem(this)'/></td>
</tr>
</table>
<div style="text-align: center">
<hr>
<div>总金额：<span id="totalPrice">xxxx</span></div>
</div>
</div>
<hr>
<div style="text-align: center">
<input type="button" value="结算" onclick="javascript:alert('去结算啰....');"/><input type="button" value="清空购物车" id="clear" onclick="clearCart()"/>
</div>
</div>
<script>
//总金额变量
let totalPrice = 0;
//删除商品从购物车
function deleteItem(obj){
if(window.confirm("确定要删除该商品吗？")){
console.log('deleting...');
$(obj).parent().parent().remove();
initTotalPrice();
}
}
//计算总金额
function initTotalPrice() {
//设置总金额初始值为0
totalPrice = 0;
$("tr").each(function (i, e) {
$(e).children().filter(".xj").each(function (index, element) {
//console.log($(element).text());
totalPrice += parseInt($(element).text());
})
})
$("#totalPrice").text(totalPrice);
}
//清空购物车
function clearCart() {
$("#cartlist").empty();
let html = "<tr>\n" +
" <th>编号</th>\n" +
" <th>名称</th>\n" +
" <th>单价</th>\n" +
" <th>数量</th>\n" +
" <th>小计</th>\n" +
" <th>操作</th>\n" +
" </tr>"
$("#cartlist").append(html);
totalPrice = 0;
$("#totalPrice").text(totalPrice);
}
$(function () {
//初始化购物车总金额
initTotalPrice();
//减少购买数量
$(".subNum").click(function () {
//获得购买数量
let num = parseInt($(this).next().val());
//获得单价
let price = parseInt($(this).parent().prev().text());
if (num > 1) {
num--;
let xj = num * price;
$(this).next().val(num);
$(this).parent().next().text(xj);
}
//重新计算总金额
initTotalPrice();
})
//增加购买数量
$(".addNum").click(function () {
//获得购买数量
let num = $(this).prev().val();
//获得单价
let price = parseInt($(this).parent().prev().text());
if (num < 100) {
num++;
let xj = num * price;
$(this).prev().val(num);
$(this).parent().next().text(xj);
}
initTotalPrice();
})
})
</script>
</body>
</html>
运行效果：
讨论:jQuery实现的购物车效果本质来说底层还是调用javascript dom操作，在真正项目开发中不利于页面的动态渲染，更推荐使用MVVM框架技术实现，比如：vue,react等等。