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

手机端一部分用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;

}

零食

￥1.00

零食

￥1.00

删除

共 0 件商品     共计：￥0.00

全选

合计:￥0.00不含邮费

结算(0)

$(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('购物车为空
点击去购买').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';

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