abstrak：jQuery代碼$(function(){    //初始化總價, 總選擇數(shù), 總條數(shù);    doPrice();    //全選/選擇框的鼠標(biāo)移上變個顏色    $('.fa-check').mouseover(function(){        if($(

jQuery代碼

$(function(){

    //初始化總價, 總選擇數(shù), 總條數(shù);

    doPrice();

    //全選/選擇框的鼠標(biāo)移上變個顏色

    $('.fa-check').mouseover(function(){

        if($(this).attr('class')!='fa fa-check checked') {

            $(this).css('color', '#ff6a00');

        }

    })

    $('.fa-check').mouseleave(function(){

        $(this).css('color','#fff');

    })

    //普通勾選

    $('.fa-check').click(function(){

        var cla=$(this).attr('class');

        if(cla!='fa fa-check checked'){

            $(this).attr('class','fa fa-check checked');

        }else{

            $(this).attr('class','fa fa-check');

        }

        doCheckAll();

        doPrice();

    })

    //全選框勾選

    $('#check-all').click(function () {

        var cla=$(this).attr('class');

        if(cla!='fa fa-check checked'){

            $('.fa-check').attr('class','fa fa-check checked');

        }else{

            $('.fa-check').attr('class','fa fa-check');

        }

        doPrice();

    })

    //檢查是否全選

    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');

        }

    }

    //加減按鈕

    $('button.minus').click(function(){

        var nowvalue=$(this).siblings('input').val();

        nowvalue=parseInt(nowvalue);

        var currentvalue=0;

        nowvalue<=1?currentvalue=1:currentvalue=nowvalue-1;

        $(this).siblings('input').val(currentvalue);

        //計算當(dāng)前的小計

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

    })

    $('button.plus').click(function(){

        var nowvalue=$(this).siblings('input').val();

        nowvalue=parseInt(nowvalue);

        var currentvalue=nowvalue+1;

        $(this).siblings('input').val(currentvalue);

        //計算當(dāng)前的小計

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

    })

    function doPrice(){

        //統(tǒng)計所有勾選了的值;

        var items=$('.list-item i[class*="fa-check"]');

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

        //改選中數(shù)

        $('.select-count').html(checkeditems.length);

        //改總條數(shù)

        $('.all-count').html(items.length);

    }

})

運行效果

Guru membetulkan：查無此人Masa pembetulan：2019-02-20 09:01:41
Rumusan guru：完成的不錯，購物車算一個重量級功能了，每次操作都會改變，所以邏輯最重要，繼續(xù)加油。