jquery实现手机端单店铺购物车结算删除功能

时间：2021-05-26

手机端一部分用flex布局写在这里看着不爽把css全部删除了。只留下js结算功能js很臃肿，请留下宝贵意见提升性能。改天上多店铺购物车手机端原版截图

效果图：

图（1）全部勾选的效果

图（2）勾选，点击“删除”效果

代码如下：

<!DOCTYPE html><html lang="zh-cn"><head> <title>购物车</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>  <meta name="keywords" content="">  <meta name="description" content="" /> <meta name="format-detection" content="telephone=no" /> <meta name="format-detection" content="email=no" /> <link rel="stylesheet" href="css/basic.css" rel="external nofollow" > <link rel="stylesheet" href="css/css.css" rel="external nofollow" ></head><style>.flex-center{ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -o-box; display: box; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -o-box-pack: center; box-pack: center; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -o-box-align: center; box-align: center;}.kong{ font-size: 0.3rem; height: 80vh; color: #333333;}.kong a { color: #333333; text-decoration: double;}</style><body><main class="dfk_main"> <dl class="gwc_dl"> <dt class="gwc_dt"><label class="gwc_1 gwc_spxz"><input type="checkbox" class="gwc_qx2 GoodsCheck" value=""></label></dt> <dd class="gwc_dd2">零食 <span>￥<span class="gwc_dd_p">1.00</span></span> <span class="spjj gwc_jj"> <input type="button" class="jian" value="-"><input type="text" class="shuliang" value="1"><input type="button" class="jia" value="+"> </span></dd> </dl> <dl class="gwc_dl"> <dt class="gwc_dt"><label class="gwc_1 gwc_spxz"><input type="checkbox" class="gwc_qx2 GoodsCheck" value=""></label></dt> <dd class="gwc_dd2">零食 <span>￥<span class="gwc_dd_p">1.00</span></span> <span class="spjj gwc_jj"> <input type="button" class="jian" value="-"><input type="text" class="shuliang" value="1"><input type="button" class="jia" value="+"> </span></dd> </dl> <section class="gwc_delectbtn"> <button type="button" class="delete">删除</button><p>共 <span class="colb51 gwc_sl">0</span> 件商品     共计：￥<span class="ShopTotal">0.00</span></p> </section></main> <footer class="gwc_footer"> <form action="#" method="get"> <p class="gwc_qx"><label class="gwc_1 gwc_label"><input type="checkbox" class="gwc_qx2 ShopCheck" value=""></label><span>全选</span> <span class="gwc_jsp"><span >合计:￥<b class="ShopTotal">0.00</b></span><span>不含邮费</span></span> <button type="button" class="gwc_btnjs">结算(<span class="gwc_sl">0</span>)</button> </p> </form> </footer> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script><script> $(function(){ $(".shuliang").keyup(function() { if (isNaN($(this).val()) || parseInt($(this).val()) < 1 || $(this).val()=="") { $(this).val("1"); } }); // 数量加 $(".jia").click(function(){ var t = $(this).parent().find(".shuliang"); t.val(parseInt(t.val())+1); var n = parseInt($(this).siblings(".shuliang").val()); //得到商品的数量 var p = parseFloat($(this).parent().siblings().children(".gwc_dd_p").text()); //得到商品的单价 var tot = p * n; //计算单个商品的总价 TotalPrice(); }); // 数量减 $(".jian").click(function(){ var t = $(this).parent().find(".shuliang"); if (parseInt(t.val())>1) { t.val(parseInt(t.val())-1); } var n = parseInt($(this).siblings(".shuliang").val()); //得到商品的数量 var p = parseFloat($(this).parent().siblings().children(".gwc_dd_p").text()); //得到商品的单价 var tot = p * n; //计算单个商品的总价 TotalPrice(); }); // 点击商品按钮 $(".GoodsCheck").change(function() { $(this).parent().toggleClass('gwc_active') var goods = $(this).parents('.dfk_main').find(".GoodsCheck"); //获取本店铺的所有商品 var goodsC = $(this).parents('.dfk_main').find(".GoodsCheck:checked"); //获取本店铺所有被选中的商品 var Shops = $(".ShopCheck"); //获取本店铺的全选按钮 if (goods.length == goodsC.length) { //如果选中的商品等于所有商品 Shops.prop('checked', true).parent(".gwc_label").addClass("gwc_active"); //店铺全选按钮被选中 TotalPrice(); } else { //如果选中的商品不等于所有商品 Shops.prop('checked', false).parent(".gwc_label").removeClass("gwc_active"); //店铺全选按钮不被选中 // 计算 TotalPrice(); } }); // 点击店铺 $(".ShopCheck").change(function() { if ($(this).prop("checked") == true) { //如果全选按钮被选中 $(".gwc_label").addClass("gwc_active"); $(".GoodsCheck").prop('checked', true).parent(".gwc_1").addClass("gwc_active"); //所有按钮都被选中 // 计算 TotalPrice() } else { $(".gwc_label").removeClass("gwc_active"); $(".GoodsCheck").prop('checked', false).parent(".gwc_1").removeClass("gwc_active"); //else所有按钮不全选 // 计算 TotalPrice(); } });//删除 $('.delete').click(function () { $(".dfk_main input[type='checkbox']:checked").each(function() { // 遍历选中的checkbox var goods = $(this).parents('.dfk_main').find(".GoodsCheck"); //获取本店铺的所有商品 var goodsC = $(this).parents('.dfk_main').find(".GoodsCheck:checked"); //获取本店铺所有被选中的商品 var Shops = $(".ShopCheck"); //获取本店铺的全选按钮 if (goods.length == goodsC.length) { //如果选中的商品等于所有商品 $('.dfk_main').html('<a href="#" rel="external nofollow" >购物车为空<br>点击去购买</a>').addClass('flex-center kong'); Shops.prop('checked', false).parent(".gwc_label").removeClass("gwc_active"); //店铺全选按钮不被选中 $('.gwc_sl,.ShopTotal').text(0.00); TotalPrice(); } else { //如果选中的商品不等于所有商品 var n = $(this).parents('.gwc_dl').index(); // 获取checkbox所在行的顺序 $(".dfk_main").find(".gwc_dl:eq("+n+")").remove(); TotalPrice(); } }); }); function TotalPrice() { var oprice = 0; //店铺总价 var sl = 0;//数量 $(".dfk_main .gwc_dl .GoodsCheck").each(function () { //循环店铺里面的商品 if ($(this).is(":checked")) { //如果该商品被选中 var num = parseInt($(this).parents(".gwc_dl").find(".shuliang").val()); //得到商品的数量 // alert(num); var price = parseFloat($(this).parents(".gwc_dl").find(".gwc_dd_p").text()); //得到商品的单价 var total = price * num; //计算单个商品的总价 oprice += parseFloat(total); //计算该店铺的总价 sl += parseInt(num); } $('.gwc_sl').text(sl); $(".ShopTotal").text(oprice.toFixed(2)); //输出全部总价 }); }}); // document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';</script></body></html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

jquery实现手机端单店铺购物车结算删除功能

相关文章

使用jQuery实现购物车结算功能

jQuery实现购物车表单自动结算效果实例

jquery.cookie实现的客户端购物车操作实例

企业网站设计增加购物车功能

基于JavaScript实现添加到购物车效果附源码下载