一个购物车页面及功能实现的详细教程

思路

1.给tbody一个id=”shopList” 当进入购物车时如果有两个商品被勾选了，需要计算出总价钱

2.当手动勾选商品时，也要把相应的价格加到总价中去

3.给全选添加一个id=”checkAll”当勾选全部选中时，要计算所有商品的总价要注意的是：这个函数，当单选是也要触发，因为当全部商品都勾选时也就相当调用了这个函数

4.当再次点击全选时取消所有产品

5.当点击+加号时也要计算

6.当点击-加号时也要计算

7.文本框中也可以直接输入，这里需要校验的地方比较多

8.当点击删除时，将选中的商品移除

代码思路

1.首先计算总价

    totalPrice();
    function totalPrice(){
        //获取所有商品列表
        var lists = $('#shopList tr');
        var total = 0;//这里是后添加的；
        //循环遍历
        lists.each(function(){
            //遍历的结果this会是tr标签，也就是js对象，我们要转换为Jquery对象
            var _vm = $(this);
            //获取所有选中的商品
            var isChecked = _vm.find('.checkbox').prop('checked');
            //判断当商品勾选时，计算总价
            if(isChecked){
                //获取单价 *1乘1就会把字符串转换为数字
                var price = _vm.find('.price').text()*1;
                var num = _vm.find('.num').val()*1;
                //总价就是两者相乘，在循环体的外面定义一个total变量用来存值
                total += price*num;
            }
        });
        //循环后将所得结果添加到页面
        $('#total').text(total);
    }

2.点击勾选商品，改变总价

    checkEvent();   
    function checkEvent(){
        //这里采用的是委托代理方式，通过冒泡机制，实现效果
        //通过给父级一个click代理效果，所有的子集当单击时都会触发这个效果
        //我们这里又添加一个筛选，只有.checkbox才会触发这个效果
        $('#shopList').on('click','.checkbox',function(){
            //调用计算系统
            totalPrice();
            //调用全选函数isCheckAll();没勾选一次都要判断
            //是否全部选中了
            isCheckAll();
        });
    };

3.全部选中时的总价格

    isCheckAll();
    function isCheckAll(){
        //判断勾选的个数和总个数是否相同
        var len  = $('#shopList .checkbox').length;
        var clen = $('#shopList .checkbox:checked').length;
        if(len === clen){
            $('#checkAll').prop('checked',true);
        }else{
            $('#checkAll').prop('checked',false);
        }
    };
    //上面的代码简化为一行
    function isCheckAll(){
        $('#checkAll').prop('checked',$('#shopList .checkbox').length === $('#shopList .checkbox:checked').length);
    };

4.判断全选是否是选中状态

    checkAllEvent();
    function checkAllEvent(){
        $('#checkAll').click(function(){
            //之前的思路：当点击时获取checkbox的状态，如果是勾选就去掉，不是就勾选，很绕
            //下面的思路：不管之前甚么状态，获取的点击后的状态，如果是勾选就设置为勾选，反之一样
            $('#shopList .checkbox').prop('checked',$(this).prop('checked'));
            //再次调用一次计算系统;
            totalPrice();
        });
    };

5.单击加号+计算价格

    addEvent();
    function addEvent(){
        //这里和checkbox一样也用委托代理
        $('#shopList').on('click','.add',function(){
            //将js对象转换为jquery对象
            var _vm = $(this);
            var num = _vm.prev().val()*1;//获取数值
            num++;
            _vm.prev().val(num);//改变后在赋值回去
            totalPrice();
            //因为当点击加号时，如果没有勾选商品，就变得没有意义，所以要勾选商品
            //勾选时，那就要判断是否全选了商品，若是都选了，那么全选按钮就要被选中
            isCheckAll();
        });
        //这里的代码可以优化下，将_vm.prev()对象存储一下
        //因为获取dom节点的过程是比较耗性能的，所以存储下好；

    }

6.单击减号-计算价格

    minusEvent();
    function minusEvent(){
        $('#shopList').on('click','.minus',function(){
            var _vm = $(this);
            var numNode = _vm.next();//获取减号所在的下一个截点对象；
            var num = numNode.val()*1;
            if(num >1){
                num--;//只有大于1的时候才减
            }
            numNode.val(num);
            totalPrice();
            isCheckAll();
        });
    };

7.文本框中直接改变数值

    numEvent();
    function numEvent(){
        $('#shopList').on('keyup','.num',function(){
            var _vm = $(this);
            var num = _vm.val();
            num = num.replace(/[^\d]+/g,'').replace(/^0+/,'');
            _vm.val(num);
            if(num){
                totalPrice();
                isCheckAll();
            }
        }).on('blur','.num',function(){
            var _vm = $(this);
            var num = _vm.val();
            if(!num){
                _vm.val(1);
            }
            totalPrice();
            isCheckAll();
        });
    };

8.删除

    delEvent();
     function delEvent(){
        $('#shopList').on('click','.col_width_9 span',function(){
            var isDel = confirm('您确定要删除么？');
            if(isDel){
                $(this).parents('tr').remove();
                totalPrice();
            }
        });
     }