jQuery初体验～实现购物车的一些功能

        这篇只要讲js部分的代码，html，css的部分不包括在内

---

        首先我们要确认购物车有哪一些功能。上图：

        1. 全选
        2. 单选
        3. 修改数量 ++ --
        4. 直接在输入框输入数量 
        5. 修改小计金额
        6. 修改总金额
        7. 修改已选择的商品数量
        8. 删除当前项
        9. 清空购物车
        10. 选中的商品高亮显示

        

---

        全选功能： 我们在点击全选是将下面的checkbox 以及另外一个全选全部加上checked属性     

$('.checkall').change(function(){
        //ischecked用于保存修改后的全选框的checked属性true/false 并据此进行其他功能
       var isChecked =  $(this).prop('checked')
       isChecked? $('.j-checkbox').prop('checked',true) :$('.j-checkbox').prop('checked',false)
       // 所有的添加高亮   10. 选中的商品高亮显示
       isChecked? $('.j-checkbox').parents('.cart-item').addClass('check-cart-item') : $('.j-checkbox').parents('.cart-item').removeClass('check-cart-item')
        //另一个全新框也选中
       isChecked? $('.checkall').prop('checked',true) :$('.checkall').prop('checked',false)   
       total()
 })

         单选功能： 在所有单选框都被选中时，全选框也要被选中

$('.j-checkbox').change(function(){
        var checkedLength = $('.j-checkbox:checked').length
        var allLength = $('.j-checkbox').length
        checkedLength === allLength? $('.checkall').prop('checked',true) :$('.checkall').prop('checked',false) 
        // 10. 选中的商品高亮显示 
        $(this).prop('checked')? $(this).parents('.cart-item').addClass('check-cart-item'):$(this).parents('.cart-item').removeClass('check-cart-item')
        total()
    })

         修改数量 ++ --功能：

    $('.increment').click(function(){
        var num = $(this).siblings('.itxt').val()
        // 原值转为数字再加一
        num = (num)*1 + 1
        // 赋值
        $(this).siblings('.itxt').val(num)
        var dom = $(this)
        rePrice(dom)
    })

    $('.decrement').click(function(){
        var num = $(this).siblings('.itxt').val()
        // 原值转为数字再减一
        num = (num)*1 - 1
        // 数值不能小于1
        num>0?$(this).siblings('.itxt').val(num):alert('不能再减了')
        // 赋值
        var dom = $(this)
        rePrice(dom)
        
    })

        直接在输入框输入数量：

$('.itxt').change(function(){
        var ivalue = $(this).val()*1
        console.log(ivalue)
        // 判断是否为数字
        if(isNaN(ivalue)){
            alert('请输入数字')
            $(this).val(1)
            return
        }
        //判断是否大于0
        if(ivalue <= 0){
            $(this).val(1)
            alert('请输入正数')
            return
        }
        var dom = $(this)
        rePrice(dom)
    })

        修改小计金额

function rePrice(dom) {
        // 获取单价
        var singlePrice = dom.parents('.cart-item').find('.p-price').text().substr(1)*1
        // 获取数量
        var num = dom.parents('.cart-item').find('.itxt').val()
        //赋值 并保留两位小数
        dom.parents('.cart-item').find('.p-sum').text('￥'+(singlePrice*num).toFixed(2))
        total()
    }

 修改总金额 和. 修改已选择的商品数量： 根据被被选中的添加的属性 check-cart-item找到所有选中的 并进行遍历汇总所有的价格和数量，最后赋值。

function total() {
        var totalPrice = 0
        var totalNum = 0
        //遍历每一个单价和数量
        $('.check-cart-item').each(function(index,ele){
            var price = $(ele).find('.p-sum').text().substr(1)*1
            var num = $(ele).find('.itxt').val()*1
            totalPrice += price
            totalNum += num
        })
        $('.amount-sum em').text(totalNum)
        $('.price-sum em').text(totalPrice.toFixed(2))
    }

 删除当前项：删除商品并添加一个删除的动画，重新计算总价

 $('.p-action>a').click(function(){
        $(this).parents('.cart-item').slideUp(300, function(){
            $(this).remove(); 
            total()   
        })
    })

清空购物车

$('.clear-all').click(function(){
        $('.cart-item').slideUp(300, function(){
            $(this).remove()
            total()
        })
    })