用jQuery做一个简单的购物车
前言：
之前用的JavaScript做的，现在结合jQuery再试一下。效果虽然差不多，但是对于了解和学习jQuery选择器还有事件等可以有一个更好的了解。
(img)自行准备，部分代码优化，大佬多指教 关于循环可以用jQuery里面的each
实现功能：
将商品添加到购物车（如果购物车有相同物品则累加对应数量）小计计算与总和积分计算与总和实现数量的增加和减少（并同步小计和积分及其总和）单个商品删除批量删除
实现效果：
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对象之间的转换，额。。感觉自己试着试着就出来了。。。
