購物車代碼思路

思路

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();
            }
        });
     }