jquery -购物车案例

最新推荐文章于 2024-04-19 10:15:13 发布

贝la

最新推荐文章于 2024-04-19 10:15:13 发布

阅读量161

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45334970/article/details/119000001

版权

前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

在这里插入图片描述

 //1.全选 全不选功能模块
    //就是把全选按钮（checkall)的状态赋值给三个小按钮(j-checkbox)就可以了
    //事件可以使用change
    $('.checkall').change(function(){
        //让每一个选择框都被选上
        $('.j-checkbox, .checkall').prop('checked',$(this).prop('checked'));
    });
    //2.如果小复选框全被选中就应该把全选按钮勾上，否则全选按钮不选
    $('.j-checkbox').change(function(){
        // if(小复选框被选中个数 ===3){
        //     选中全选按钮
        // }else{
        //     补选中全选按钮
        // }
        // console.log($('.j-checkbox:checked').length);
        // $('.j-checkbox').length 所有小复选框的个数
        if($('.j-checkbox:checked').length === $('.j-checkbox').length ){
            $('.checkall').prop('checked',true);
        }else{
            $('.checkall').prop('checked',false);
        }
    })

在这里插入图片描述

 //3.增减商品数量模块，首先声明一个变量，当我们点击+号(increment),就让这个值++,然后赋值给文本框
    $('.increment').click(function(){
        var n = $(this).siblings('.itxt').val();
        n++;
        $(this).siblings('.itxt').val(n);
    })
    $('.decrement').click(function(){
        var n = $(this).siblings('.itxt').val();
        if(n==1){
            return false;
        }else{
            n--;
            $(this).siblings('.itxt').val(n);
        }
        
    })

在这里插入图片描述

 //3.增减商品数量模块，首先声明一个变量，当我们点击+号(increment),就让这个值++,然后赋值给文本框
    $('.increment').click(function(){
        var n = $(this).siblings('.itxt').val();
        n++;
        $(this).siblings('.itxt').val(n);
        //4.计算小计模块 根据文本框的值 乘以当前商品的价格 就是 商品的小计
        // parents('.p-num') 返回指定的祖先元素
        var p = $(this).parents('.p-num').siblings('.p-price').html();
        p=p.substr(1);
        // console.log(p);
        //小计模块
        // toFixed(2) 保留两位小数
        $(this).parents('.p-num').siblings('.p-sum').html('￥'+ (p * n).toFixed(2));
    });
    $('.decrement').click(function(){
        var n = $(this).siblings('.itxt').val();
        if(n==1){
            return false;
        }else{
            n--;
            $(this).siblings('.itxt').val(n);
            //4.计算小计模块 根据文本框的值 乘以当前商品的价格 就是 商品的小计
            var p = $(this).parents('.p-num').siblings('.p-price').html();
            p=p.substr(1);
            // console.log(p);
            //小计模块
            $(this).parents('.p-num').siblings('.p-sum').html('￥'+ (p * n).toFixed(2));
            }
        
    });
    //5.计算总计和总金额
    function getSum(){
        var count = 0;
        var money = 0;
        $('.itxt').each(function(i,ele){
            count += parseInt($(ele).val());
        });
        $('.amount-sum em').text(count);

        $('.p-sum').each(function(i,ele){
            money += parseFloat($(ele).text().substr(1));
        });
        $('.price-sum em').text('￥'+ money.toFixed(2));
    }

在这里插入图片描述

.check-cart-item {
    background: #fff4e8;
}

 $(".checkall").change(function() {
        // console.log($(this).prop("checked"));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
        if ($(this).prop("checked")) {
            // 让所有商品添加背景色
            // 让所有的商品添加 check-cart-item 类名
            $(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(".cart-item").removeClass("check-cart-item");
        }
    });
    // 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
    $(".j-checkbox").change(function() {
        // if(被选中的小的复选框的个数 === 3) {
        //     就要选中全选按钮
        // } else {
        //     不要选中全选按钮
        // }
        // console.log($(".j-checkbox:checked").length);
        // $(".j-checkbox").length 这个是所有的小复选框的个数
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
        if ($(this).prop("checked")) {
            // 让当前的商品添加 check-cart-item 类名
            $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(this).parents(".cart-item").removeClass("check-cart-item");
        }
    });