笔记--关于购物车很全的js细节

最新推荐文章于 2022-02-07 16:14:27 发布

longtitudeSaili

最新推荐文章于 2022-02-07 16:14:27 发布

阅读量123

点赞数

分类专栏：原生js 文章标签： jquery css3 html5

本文链接：https://blog.csdn.net/SweetMollycai/article/details/115480603

版权

JavaScript DOM操作购物车逻辑商品选择数量控制

关键词由CSDN通过智能技术生成

原生js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

// 数量减
$(".down").click(function() {
	var t = $(this).parent().find('.outcomes');
	t.val(parseInt(t.val()) - 1);
	if (t.val() <= 1) {
		t.val(1);
	}
	TotalPrice();
});
// 数量加
$(".add").click(function() {
	var t = $(this).parent().find('.outcomes');
	t.val(parseInt(t.val()) + 1);
	if (t.val() <= 1) {
		t.val(1);
	}
	TotalPrice();
});
// 点击商品按钮
$(".checs").click(function() {
	if($(this).is(":checked")){
		$(".buys_counts .buy_count_right .buts").css("background-color","#0a78df")
	}else{
		$(".buys_counts .buy_count_right .buts").css("background-color","#D7D7D7")
	}
	var goods = $(this).closest(".cart-contain").find(".checs"); //获取本店铺的所有商品
	var goodsC = $(this).closest(".cart-contain").find(".checs:checked"); //获取本店铺所有被选中的商品
	var Shops = $(this).closest(".cart-contain").find(".allCheck"); //获取本店铺的全选按钮
	if (goods.length == goodsC.length) { //如果选中的商品等于所有商品
		Shops.prop('checked', true); //店铺全选按钮被选中
	} else { //如果选中的商品不等于所有商品
		Shops.prop('checked', false); //店铺全选按钮不被选中
		$(".allCheck").prop('checked', false); //全选按钮也不被选中
		TotalPrice();
	}
});
// 点击全选按钮
$(".cart-contain .allCheck").click(function() {
	if ($(this).prop("checked") == true) { //如果全选按钮被选中
		$(".checs").prop('checked', true); //所有按钮都被选中
		TotalPrice();
		$(".buys_counts .buy_count_right .buts").css("background-color","#0a78df")
	} else {
		$(".checs").prop('checked', false); //else所有按钮不全选
		TotalPrice();
		$(".buys_counts .buy_count_right .buts").css("background-color","#D7D7D7")
	}
	$(".cart-contain .allCheck").change(); //执行店铺全选的操作
});

function TotalPrice() {
    var oprice = 0; //店铺总价
    var sums = 0; //选中数量
    $(".cart_list_cons").find(".checs").each(function() { //循环店铺里面的商品
        if($(this).is(":checked")) { //如果该商品被选中
            var num = parseInt($(this).parents(".con_left").siblings(".con_right").find(".outcomes").val()); //得到商品的数量
            var price = parseInt($(this).parents(".con_left").siblings(".con_right").find(".price span").text()); //得到商品的单价
            var total = price * num; //计算单个商品的总价
            oprice += total; //计算该店铺的总价
            sums += num;
        }
        $(this).closest(".cart-contain").find(".pro_name span").text(parseInt(sums));
        $(this).closest(".cart-contain").find(".sum_cons span").text(oprice.toFixed(2)); //显示被选中商品的店铺总价
    });
};