jQuery购物车案例

JQuery购物车案例

全选模块

选中全选按钮，商品将会添加.check-cart-item类

$('.checkall').change(function(){
        //console.log($(this).prop("checked"));
        $('.j-checkbox, .checkall').prop("checked",$(this).prop("checked"));
        if($(this).prop("checked")){
            $('.cart-item').addClass("check-cart-item");
        }
        else{
            $('.cart-item').removeClass("check-cart-item"); 
        }
        getCount();
    })

从商品列表的内部来实现全选功能

如果商品选中的数量==商品总数，则证明全部商品都选中，此时就要将全选按钮选中

$('.j-checkbox').change(function()
        if($('.j-checkbox:checked').length === $('.j-checkbox').length){
            $('.checkall').prop("checked",true);
        }else{
            $('.checkall').prop("checked",false);
        }
        if($(this).prop("checked")){
            $(this).parent().parent(".cart-item").addClass("check-cart-item");
        }else{
            $(this).parent().parent(".cart-item").removeClass("check-cart-item");
        }
        getCount();
    })

2.自增按钮

商品数量模块的增加，点击+，需要变量实现自增功能，然后将变量的值赋给文本框

$('.increment').click(function()
//获取此时文本框中的值，此值为该商品的数量
        var n=$(this).siblings(".itxt").val();
   //当我点击+按钮时，该事件发生，n需要在文本框的基础上增加
        n++;
       //然后将n的值赋给文本框
        $(this).siblings(".itxt").val(n)
     //(1)获取商品的单价
     var p = $(this).parent().parent().siblings(".p-price").html();
//获取的单价带单位，substr()截取字符串，将单位去掉
     p = p.substr(1)
    //单价*数量获该商品的总价格，保留两位小数
    var pSum = (p * n).toFixed(2);
    //将该价格天到放小计的文本框中
     $(this).parent().parent().siblings(".p-sum").html("￥"+pSum);
    //调用函数
     getCount()
     }) 

自减模块

商品数量模块的减少，点击-，需要变量实现自减功能，然后将变量的值赋给文本框

$('.decrement').click(function(){
           var n=$(this).siblings(".itxt").val();
           if(n>1){
               n--;
               $(this).siblings(".itxt").val(n);
               //(1)获取商品的单价
                var p = $(this).parent().parent().siblings(".p-price").html();
                p = p.substr(1)
               //四舍五入
               var pSum = (p * n).toFixed(2)
                $(this).parents(".p-num").siblings(".p-sum").html("￥"+pSum);
                getCount()
           }else{
              alert('是否删除该商品');
              return false;
           } 
    })

直接键盘输入文本框，改变小计的值

$('.itxt').change(function(){
        //获取商品的单价
        var n=$(this).val();
        var p = $(this).parents().siblings(".p-price").html();
        /* 截取字符串的长度，从第一个字符串到最后一个，下标从0开始*/
         p = p.substr(1)
        var pSum = (p * n).toFixed(2);
         $(this).parents(".p-num").siblings(".p-sum").html("￥"+pSum);
         getCount()
    })
    

删除商品

当点击商品后的删除按钮时，删除该商品

$('.p-action a').click(function()
            alert("确定删除该商品吗?");
            $(this).parents('.cart-item').remove();
            getCount();
        })

删除所有商品

当点击删除所有商品的按钮时，删除所有商品

$('.clear-all').click(function(){
            alert("确定删除所有商品吗?");
            $('.cart-item').remove();
            getCount();
        })

删除选中的商品

当点击删除选中商品时

$('.remove-batch').click(function(){
            alert("确定删除选中的所有商品吗?");
           //法一：
      /*$('.j-checkbox').each(function(index,element){
         if($(element).prop('checked')){ 
         $(element).parents(".cart-item").remove();
                }
            }) */
           //法二：
            //将复选框中选中的组成一个伪数组
            $('.j-checkbox:checked').parents(".cart-item").remove();
         getCount() ;
    })

商品数量、商品总价

function getCount()
     //商品总数量
        var count=0;
        $('.itxt').each(function(index,element)
           if($(element).parents('.p-num').siblings('.p-checkbox').children('.j-checkbox').prop('checked')){ 
            count+=parseInt($(element).val());
           }
        })
        $('.amount-sum em').text(count);
 
    //商品总价
        var sum=0;
        $('.p-sum').each(function(index,element){
           if($(element).siblings('.p-checkbox').children('.j-checkbox').prop('checked')){
            sum += parseFloat(($(element).text().substr(1)));
            //parseFloat()强转小数会随机，所有必须要有toFixed()方法
           }
        })
        $('.price-sum em').text("￥"+sum.toFixed(2));
    
    }