最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jquery实现手机端单店铺购物车结算删除功能
时间:2017-04-29 编辑:简简单单 来源:一聚教程网
手机端一部分用flex布局写在这里看着不爽把css全部删除了。只留下js结算功能js很臃肿,请留下宝贵意见提升性能。改天上多店铺购物车手机端原版截图
效果图:
图(1)全部勾选的效果
图(2)勾选,点击“删除”效果
代码如下:
代码如下 | 复制代码 |
.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; } ¥
¥
共
$(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); varn=parseInt($(this).siblings(".shuliang").val()); //得到商品的数量 varp=parseFloat($(this).parent().siblings().children(".gwc_dd_p").text()); //得到商品的单价 vartot=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(' 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'; |