1.功能介绍
购物车页面的功能包括：选择要购买的商品、全选商品；商品数量增减；商品删除；价格总计。
2.实现思路
根据利用冒泡原理，使用jQuery的.on()方法为整个购物车的父元素绑定事件，从而点击子元素时也可触发事件。
3.实现代码
checkAll.php(商品全选功能)
<?php
//思路：根据前端传来的用户id和是否选中(is_checked)的值，修改数据库购物车列表中，该用户所有商品是否选中的值。
require_once("../init.php");
session_start();
@$uid=$_SESSION["uid"];
@$checkAll=$_REQUEST["checkall"];
if($uid!=null&&$checkAll!=null){
$sql="UPDATE xxx_shoppingcart_item SET is_checked=$checkAll WHERE uid=$uid";
mysqli_query($conn,$sql);
}get.php(加载用户购物车中的商品信息)
<?php
//data/cart/get.php
//购物车页面当前用户的购物车商品汇总，用户信息存储在session中
header("Content-Type:application/json");
require_once("../init.php");
session_start();
@$uid=$_SESSION["uid"];
//如果用户已登录
if($uid!=null){
$sql="SELECT *,(SELECT sm FROM xxx_product_details_pic WHERE pid=pid limit 1) AS sm FROM xxx_shoppingcart_item INNER JOIN xxx_product_details ON pid=lid WHERE uid=$uid"; //子查询和连接查询，查询要显示的商品信息内容
$result=mysqli_query($conn,$sql);
echo json_encode(mysqli_fetch_all($result,1));
};check.php(单个商品是否选中功能)
<?php
//data/cart/check.php
//接收前端传来的商品id和是否选中的值，修改数据库购物车列表中的数据
require_once("../init.php");
@$iid=$_REQUEST["iid"];
@$checked=$_REQUEST["checked"];
if($iid!=null&&$checked!=null){
$sql="UPDATE xxx_shoppingcart_item SET is_checked=$checked WHERE iid=$iid";
mysqli_query($conn,$sql);
}deleteOne.php(删除单个商品功能)
<?php
//data/cart/deleteOne.php
@$iid=$_REQUEST["iid"];
if($iid!=null){
$sql="DELETE FROM xxx_shoppingcart_item WHERE iid=$iid";
mysqli_query($conn,$sql);
};deleteChecked.php(删除选中商品的功能)
<?php
//利用session中存储的用户信息，删除用户购物车中选中的所有商品
require_once("../init.php");
session_start();
@$uid=$_SESSION["uid"];
if($uid!=null){
$sql="DELETE FROM xxx_shoppingcart_item WHERE uid=$uid AND is_checked=1";
mysqli_query($conn,$sql);
};cart.js
$(()=>{
//DOM加载后执行
//上边全选按钮
var $chbAlls=$(".check-top>img,.all>span>img");
$chbAlls.click(function(){
var $img=$(this);
var checkall=$img.attr("src").endsWith("normal.png")?1:0;
//endsWith() 判断是否以字符串为结尾，返回布尔类型
$.get("data/cart/checkAll.php",{checkall},()=>{
loadCart();
});
//$(".check-top>img").attr("src","img/cart/product_true.png");
});
//加载购物车页面商品信息
function loadCart(){
$.getJSON("data/cart/get.php",items=>{
//全选按钮
$chbAlls.attr("src",
items.every(item=>item.is_checked==1)?
"img/cart/product_true.png":
"img/cart/product_normal.png"
);
var html="";
var total_count=0;
var total=0;
for(var item of items){
//计算选中商品的总价和商品总数
if(item.is_checked==1){
total+=item.price*item.count;
total_count+=parseInt(item.count);
};
//加载商品信息
html+=`<div class="imfor">
<div class="check">
<img src="img/cart/product_${item.is_checked==0?'normal':'true'}.png" data-iid="${item.iid}" alt="">
</div>
<div class="product">
<a href="product_details.html?pid=${item.lid}">
<img src="${item.sm}" alt="">
</a>
<span class="desc">
<a href="product_details.html?pid=${item.lid}">${item.title}</a>
</span>
<p class="col">
<span></span>
<span class="color-desc"></span>
</p>
</div>
<div class="price">
<p class="price-desc"></p>
<p>
<b>¥</b>${item.price}
</p>
</div>
<div class="num">
<span class="reduce" data-iid="${item.iid}"> - </span>
<input type="text" value="${item.count}">
<span class="add" data-iid="${item.iid}"> + </span>
</div>
<div class="total-price">
<span>¥</span>
<span>${(item.count*item.price).toFixed(2)}</span>
</div>
<div class="del">
<a href="#" data-iid="${item.iid}">删除</a>
</div>
</div>
</div>`;
}
$("#content-box-body").html(html);
$(".totalPrices,.foot-price").html("¥"+total.toFixed(2));
$(".total,.totalOne").html(total_count);
});
};
$.getJSON("data/users/isLogin.php",data=>{
//确认用户是否登录
if(data.ok==1){
loadCart();
//为父元素添加单击事件
$("#content-box-body").on("click",
".imfor>.check>img,.reduce,.add,.del>a,#box>.foot>.base>a",
function(){
var $tar=$(this);
//单个商品是否选中按钮
if($tar.is("img")){
var iid=$tar.data("iid");
var checked=$tar.attr("src").endsWith("normal.png")?1:0;
$.get("data/cart/check.php",{iid,checked},()=>{
loadCart();
});
//单个商品删除功能
}else if($tar.is(".del>a")){
var iid=$tar.data("iid");
$.get("data/cart/deleteOne.php",{iid},()=>{
loadCart();
})
//商品数量增减功能
}else if($tar.is(".reduce,.add")){
var iid=$tar.data("iid");
var count=parseInt($tar.siblings("input").val());
if($tar.is(".add"))
count++;
else
count--;
$.get("data/cart/update.php",{iid,count}).then(()=>{
loadCart();
})
}
});
//底部删除选中商品
$("#content-box>.foot>.base>a").click(function(){
$.get("data/cart/deleteChecked.php").then(loadCart);
});
}else{
location.href="login.html?back="+location.href;
}
})
});更多内容，欢迎关注微信公众号“让知识成为资产”。