購物車代碼思路

思路

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();
            }
        });
     }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章