亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

購物車頁面效果

original 2019-03-08 00:18:27 258
abstrait:  $(document).ready(function(){     doPrice()     /*移上變橙色方法1:     $('.fa-check').mouseover(function(){    &

移動變色.jpg

  $(document).ready(function(){
    doPrice()
    /*移上變橙色方法1:
    $('.fa-check').mouseover(function(){
        if($(this).attr!="fa fa-check checked"){
            $(this).css('color','#ff6700')
        }
    })
    移開背景色變白
    $('.fa-check').mouseleave(function(){
        if($(this).attr!="fa fa-check checked"){
            $(this).css('color','#fff')
        }
    })*/
    //方法2:
    $('.fa-check').hover(
        function(){
            if($(this).attr('class')!="fa fa-check checked"){
                $(this).css('color','#ff6700')
            }
        },
        function(){
            $(this).css('color','#fff')
        }
    )
    /*思路總結(jié):
      1、所有的自選框都是使用同樣的字體庫進(jìn)行引入;
      2、首先獲取當(dāng)前自選框的claSS 判斷不等于選中的class;
      3、不等于執(zhí)行修改當(dāng)前自選框div的字體色為橙色
      4、等于則執(zhí)行字體色為白色
      小結(jié):可以使用點(diǎn)擊事件,也可以使用.hover切換事件來執(zhí)行
    */

普通選擇.jpg

    //普通點(diǎn)擊事件
    $('.fa-check').click(function(){
        /*方法1
        var cla=$(this).attr('class');
        var cla1='fa fa-check checked';
        if(cla!=cla1){
            $(this).attr('class','fa fa-check checked');
        }else{
            $(this).attr('class','fa fa-check')
        }*/
        //方法2:三目運(yùn)算符
        $(this).attr('class')!='fa fa-check checked'?$(this).attr('class','fa fa-check checked'):$(this).attr('class','fa fa-check');
        doCheckAll()
        doPrice()
    })
    /*普通點(diǎn)擊事件總結(jié)
      1、首先獲取返回當(dāng)前選擇框的class
      2、然后判斷是否選中
      3、如果當(dāng)前選擇框class不等于選中,點(diǎn)擊執(zhí)行修改新的class為選中
      4、否則當(dāng)前選擇框class等于選中,則執(zhí)行修改新的class為不選中
    */

全選.jpg

    //全選框按鈕控制
    function doCheckAll(){
        var allitem=$('.list-item i[class*="fa-check"]').length
        var checkeditem=$('.list-item i[class$="checked"]').length
        if(allitem!=checkeditem){
            $('#check-all').attr('class','fa fa-check')
        }else{
            $('#check-all').attr('class','fa fa-check checked')
        }
    }
    /*全選框按鈕控制總結(jié)
     1、先獲得每一個單選擇框所在div里i元素的class,并檢測長度賦值給變量
     2、然后再獲得每一個單選擇框所在div里i元素的class被選中,獲得長度并賦值 
     3、然后判斷每一個單選框所在div長度不等于被選中,則是單選框有未選中的,執(zhí)行全選框i元素 不被選中
     4、否則長度等于被選中,則執(zhí)行全框框i元素被選中。
     5、因為遍歷的整個list-item單選框,所以需要再普通點(diǎn)擊事件調(diào)用此函數(shù)。
    */
    
    //全選點(diǎn)擊事件
    $('#check-all').click(function(){
   /*   var cla=$(this).attr('class');
        var cla=$(this).attr('class')
        var cla1='fa fa-check checked';
        if(cla!=cla1){
            $('.fa-check').attr('class','fa fa-check checked');
        }else{
            $('.fa-check').attr('class','fa fa-check');
        }
   */
        //方法2 三目運(yùn)算
        $(this).attr('class')!='fa fa-check checked'?$('.fa-check').attr('class','fa fa-check checked'):$('.fa-check').attr('class','fa fa-check');
        doPrice()
    })
    /*全選點(diǎn)擊事件總結(jié)
    1、所有的選擇框都是通過i元素引用字體庫來實(shí)現(xiàn)的,所以他們的class名是一致的,所以全選使用了id來做區(qū)分,點(diǎn)擊全選按鈕事件
    2、獲得當(dāng)前全選框i元素的class
    3、判斷當(dāng)前全選框不等于選中,點(diǎn)擊則執(zhí)行選中所有的選擇框
    4、判斷當(dāng)前全選框等于選中,點(diǎn)擊側(cè)執(zhí)行不選中所有選擇框
    */

加減.jpg

    //加減按鈕
    $('.plus').click(function(){
        var nowvalue=$(this).siblings('input').val()
        var nowvalue=parseInt(nowvalue)
        var currentvalue=0
        var currentvalue=nowvalue+1
        $(this).siblings('input').val(currentvalue)
        
        /*加號總結(jié)
        1、找到加號的class做點(diǎn)擊事件
        2、當(dāng)前的加號通過siblings獲得指定同胞元素input,并通過val獲得value值,并賦值給變量
        3、此時返回的value值是文本,需要使用parseInt 轉(zhuǎn)換成數(shù)字整數(shù)并賦值給變量
        4、再建立一個存儲value值的變量為0,然后每點(diǎn)擊一次就+前面value的值。
        5:獲取指定同級元素的value值,然后轉(zhuǎn)換成數(shù)字整數(shù),然后點(diǎn)擊一次+1.
        注:獲取指定同級元素的value值,然后轉(zhuǎn)換成數(shù)字整數(shù),點(diǎn)擊一次value值+1
        */
        //獲取商品單價
        var danjia=parseFloat($(this).parents('.good-num').siblings('.good-price').html())
        var xiaoji=danjia*currentvalue
        $(this).parents('.good-num').siblings('.good-total-price').html(xiaoji+'元')
        doPrice()
    })  
        獲取商品單價
        1、當(dāng)前的加號使用parents找到指定的父級,然后通過指定父級找到父級同級元素并返回元素內(nèi)容,
           然后使用parseFloat取數(shù)字部分,賦值給單價;
        2、使用value數(shù)量值*單價  就是小計,然后找到小計的 div修改值就行。
           注:就是尋找加號和單價關(guān)系,使用指定父級、同級、或者祖先、子元素,只要能找到單價獲得元素內(nèi)容,
           并剔除文字 解析出數(shù)字。
          減號獲取商品單價也是一樣的,只是點(diǎn)擊的減號div觸發(fā)事件而已。
        */
        
    //減號
    $('.minus').click(function(){
        var nowvalue=$(this).siblings('input').val()
        var nowvalue=parseInt(nowvalue)
        var currentvalue=0
        nowvalue<=1?currentvalue=1:currentvalue=nowvalue-1
        $(this).siblings('input').val(currentvalue)

        //獲取商品單價
        var danjia=parseFloat($(this).parents('.good-num').siblings('.good-price').html())
        var xiaoji=danjia*currentvalue
        $(this).parents('.good-num').siblings('.good-total-price').html(xiaoji+'元')
        doPrice()
    })
    /*減號總結(jié)
    1、獲得當(dāng)前減號的同級input框的value值,此時值為文本賦值給變量,
    2、使用parseInt把文本值轉(zhuǎn)換成數(shù)字整數(shù)
    3、定義一個現(xiàn)實(shí)結(jié)果的變量
    4、判斷value值是否小于等于1,如果小于等于1的時,則結(jié)果變量為1。
    5、如果value值大于1,則結(jié)果變量就-1
    6、最后找到當(dāng)前的input框修改value值為結(jié)果變量
    獲取指定同級元素的value值,然后轉(zhuǎn)換成數(shù)字整數(shù),然后判斷是否小于等于1,小于等于則為1,大于點(diǎn)擊一次+1 使用if else也可以
    */

合計.jpg

    //統(tǒng)計所有勾選的值
    function doPrice(){
        var checkeditems=$('.list-item i[class$="checked"]').parents('.select').siblings('.good-total-price')//選中小計的價錢
        var totalprice=0//儲存總計
        for(var i=0;i<checkeditems.length;i++){
            totalprice+=parseFloat(checkeditems[i].innerHTML)
        }
        $('.sum-price').html(totalprice)

        //獲取每一個單選框i元素的class 賦值給變量items
        var items=$('.list-item i[class*="fa-check"]')
        //選中多少件(選中小計div的數(shù)量的長度)
        $('.select-count').html(checkeditems.length)
        //總商品數(shù)(每一個單選框的長度)
        $('.all-count').html(items.length)
    }
    /*統(tǒng)計所有被勾選div的小計價格累加的值
     1、獲取每被選中單選框div 小計的價錢, 通過被選中i元素 的父級div 查找到父級div的同級價格小計div
     2、建立存儲總計的變量
     3、使用for循環(huán),判斷被勾選的價格小計div的長度,也就是遍歷整個被勾選的div,并使用innerHTML返回文本內(nèi)容
     4、每調(diào)用一次變量,存儲總計變量就+被勾選div的文本值(使用parseFloat篩選到數(shù)字到浮點(diǎn)數(shù),屏蔽了字符元;
     5、在合計div的輸出總計變量。
     注:合計變量必須先在就緒函數(shù)后先清零,然后因為全選、單選、數(shù)量增加和減少都影響到合計變量,所以需要再這些地方調(diào)用合計函數(shù)。
     */
})


Professeur correcteur:天蓬老師Temps de correction:2019-03-08 09:33:11
Résumé du professeur:實(shí)際項目中, 這樣的購買單計算總價操作, 都是采用數(shù)據(jù)的雙向綁定來實(shí)現(xiàn)的, 模型上比這個要簡單些, 有空了解一個vue

Notes de version

Entrées populaires