文章投稿
  1. 聚客号首页
  2. 投稿

php购物车（PHP购物车网站）

罗罗 • • 投稿

1.功能介绍

购物车页面的功能包括：选择要购买的商品、全选商品；商品数量增减；商品删除；价格总计。

2.实现思路

根据利用冒泡原理，使用jQuery的.on()方法为整个购物车的父元素绑定事件，从而点击子元素时也可触发事件。

3.实现代码

checkAll.php(商品全选功能)

get.php(加载用户购物车中的商品信息)

check.php(单个商品是否选中功能)

deleteOne.php(删除单个商品功能)

deleteChecked.php(删除选中商品的功能)

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 = php购物车（PHP购物车网站）插图1 ${item.title}

￥${item.price}

- ￥ ${(item.count*item.price).toFixed(2)} 删除 ; } $(“#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; } })});php购物车（PHP购物车网站）

本文来自:罗罗，不代表聚客号立场！

如若转载，请注明出处：https://www.jukehao.com/125287.html

赞 (0)
罗罗罗罗网站编辑
0
上一篇 2023-01-16 13:20:16
下一篇 2023-01-16 13:42:56

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件到xx1080@qq.com举报，一经查实，本站将立刻删除。