用jQuery做一个简单的购物车
程序员文章站
2022-05-23 08:38:04
...
用jQuery做一个简单的购物车
前言：
之前用的JavaScript做的，现在结合jQuery再试一下。效果虽然差不多，但是对于了解和学习jQuery选择器还有事件等可以有一个更好的了解。
(img)自行准备，部分代码优化，大佬多指教
实现功能：
- 将商品添加到购物车（如果购物车有相同物品则累加对应数量）
- 小计计算与总和
- 积分计算与总和
- 实现数量的增加和减少（并同步小计和积分及其总和）
- 单个商品删除
- 批量删除
实现效果：
CSS代码：
#info-table{text-align: center;}
#info-input{width: 1200px;margin: 0px auto;}
#info-input>div{
width: 1200px;
margin: 20px 0px;
}
.shopCount{color: orange;}
a{text-decoration: none;color: deepskyblue;}
#resultTotalMoney,#integralTotal{color: orange;}
.total-div{text-align: right;}
.btdelete{float: left;}
.btorinter-div{height: auto;overflow: auto;}
.viewIntegral{float: right;}
.btbuy{background-color: orange;color: white;border: 0px;float: right;}
#shop{
width: 800px;margin: 0px auto;
height: auto;
overflow: auto;
}
#shop li{
text-align: center;
list-style: none;
float: left;
height: auto;
overflow: auto;
margin: 20px;
}
#shop a{
display: block;
height: auto;
overflow: auto;
}
.price{color: red;}
HTML+jQuery代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery实现购物车</title>
</head>
<link rel="stylesheet" type="text/css" href="css/mycart.css"/>
<script src="js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 全选
$("#allCheck").click(function(){
$(".selectOne").prop("checked",$(this).prop("checked"));
})
// 单个删除
$("#mytable").on("click",".delete",function(){
if (confirm("是否将该物品移除购物车？")){
$(this).parents("tr").remove();
// 刷新总价
allShopPriceTotal();
}
})
// 批量删除
$(".btdelete").on("click",function(){
if (confirm("是否从购物车移除选择的所有商品？")){
$(".selectOne:checked").parents("tr").remove();
// 刷新总价
allShopPriceTotal();
}
})
// 添加
$(".showShop").click(function(){
if (confirm('是否将该商品添加到购物车？')){
// 判断该商品是否已经存在在购物车内
var tableShop = $(".imgbackground").children("img");
for (var i = 0; i < tableShop.length;i++) {
if ($(this).children("img")[0].src == tableShop[i].src){
// 存在则增加相应的数量
return $("#plus").click();
}
}
// 不存在则添加到购物车
var html = "<tr>";
html += '<td><input type="checkbox" class="selectOne" /></td>';
html += '<td class="imgbackground"><img src='+ $(this).children("img")[0].src +' height="100" width="100"/></td>';
html += '<td class="integral">'+ parseInt(parseInt($(this).children("span")[0].innerHTML)/20) +'</td>';
html += '<td class="price">'+ $(this).children("span")[0].innerHTML +'</td>';
html += '<td><button id="reduce">-</button> <input type="text" id="count" size="1" readonly="true" value="1"/>';
html += ' <button id="plus">+</button></td>';
html += '<td class="shopCount">0</td>';
html += '<td><a href="#" class="delete">删除</a></td>';
html += '</tr>';
$("#mytable").children("tbody").append(html);
// 初始化全部商品小计
singleAllSubTotal();
}
})
// 商品数量的增加
$("#mytable").on("click","#plus",function(){
$(this).prev().val(parseInt($(this).prev().val()) + 1);
// 小计
singleSubTotal($(this).parent().next());
})
// 商品数量的减少
$("#mytable").on("click","#reduce",function(){
if ($(this).next().val() == 1){
return;
}
$(this).next().val(parseInt($(this).next().val()) - 1);
// 小计
singleSubTotal($(this).parent().next());
})
// 初始化全部商品小计
function singleAllSubTotal(){
var obj = $(".shopCount");
for(shopCount of obj){
singleSubTotal(shopCount);
}
}
// 计算单个商品的小计
function singleSubTotal(obj){
var price = $(obj).parents("tr").children(".price").html();
var count =$(obj).prev().children("#count").val();
$(obj).html(eval((price + "*" + count)));
// 所有商品的总价钱
allShopPriceTotal();
}
// 所有商品的总价钱
function allShopPriceTotal(){
var allSingelSub = $(".shopCount");
var sum = "0";
for (singelSub of allSingelSub){
if (sum != ""){
sum += "+";
}
sum += $(singelSub).html();
}
$("#resultTotalMoney").html(eval(sum));
// 可得积分总和
allIntegralTotal();
}
// 可得积分总和
function allIntegralTotal(){
// 所有积分对象
var allSingelIntegral = $(".integral");
// 计算集
var sum = "0";
for (singelIntegral of allSingelIntegral){
// 数量
var count = $(singelIntegral).next().next().children("#count").val();
if (sum != ""){
sum += "+";
}
sum += $(singelIntegral).html() + "*" + count;
}
$("#integralTotal").html(eval(sum));
}
// 鼠标移动改变背景颜色
$("#mytable").on("mousemove",".imgbackground",function(){
$(this).css("background-color","orange");
}).on("mouseleave",".imgbackground",function(){
$(this).css("background-color","white");
})
// 立即购买
$(".btbuy").click(function(){
if (confirm("是否全部购买！")){
$("tr").not($("#mytable").children("tbody").children("tr")[0]).remove();
// 所有商品的总价钱
allShopPriceTotal();
}
})
//初始化全部商品小计
singleAllSubTotal();
})
</script>
</head>
<body>
<div>
<div id="shop">
<ul>
<li>
<a href="#" class="showShop">
<img src="img/a.jpg" height="100" width="100"/><br />
<span class="price">4999.00</span>¥<br />
添加至购物车
</a>
</li>
<li>
<a href="#" class="showShop">
<img src="img/b.jpg" height="100" width="100"/><br />
<span class="price">1999.00</span>¥<br />
添加至购物车
</a>
</li>
<li>
<a href="#" class="showShop">
<img src="img/c.jpg" height="100" width="100"/><br />
<span class="price">3999.00</span>¥<br />
添加至购物车
</a>
</li>
<li>
<a href="#" class="showShop">
<img src="img/d.jpg" height="100" width="100"/><br />
<span class="price">999.00</span>¥<br />
添加至购物车
</a>
</li>
<li>
<a href="#" class="showShop">
<img src="img/e.jpg" height="100" width="100"/><br />
<span class="price">5666.00</span>¥<br />
添加至购物车
</a>
</li>
</ul>
</div>
<div id="info-table">
<h1>购物车</h1>
<table id="mytable" width="1200" align="center">
<tr>
<th><input type="checkbox" id="allCheck"/>全选</th>
<th>店铺宝贝</th>
<th>获积分</th>
<th>单价(元)</th>
<th>数量</th>
<th>小计(元)</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="selectOne" /></td>
<td class="imgbackground"><img src="img/a.jpg" height="100" width="100"/></td>
<td class="integral">249</td>
<td class="price">4999.00</td>
<td>
<button id="reduce">-</button>
<input type="text" id="count" size="1" readonly="true" value="1"/>
<button id="plus">+</button>
</td>
<td class="shopCount">0</td>
<td><a href="#" class="delete">删除</a></td>
</tr>
</table>
</div>
<div id="info-input">
<div class="total-div">
<span>商品总价(不含运费)：<span id="resultTotalMoney">0</span>元</span>
</div>
<div class="btorinter-div">
<button class="btdelete">删除所选</button>
<span class="viewIntegral">可获积分：<span id="integralTotal">0</span>点</span>
</div>
<div>
<button class="btbuy" >立即购买</button>
</div>
</div>
</div>
</body>
</html>
之间涉及到的document与jQuery对象之间的转换，额。。感觉自己试着试着就出来了。。。