jQuery购物车

简单实现购物车的基本功能，图标使用的是阿里图标库

html:

<ul class="container">
    <li class="list">
        <i class="iconfont icon-wancheng"></i>
        <div class="goods">
            <div class="goodsimg">
                <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2866394589,3241271447&fm=26&gp=0.jpg" alt="">
            </div>
            <div class="goodsinfo">
                <p class="goodstitle">
                    FSHANG凡尚D1能量一线三分头加粗提速安卓/Type-c/iPhone通用数据线
                </p>
                <p class="goodsattr">
                    <span>白色</span>
                    <span>白色</span>
                </p>
            </div>
            <p class="money">
                <span class="price">
                    <i class="iconfont icon-Icon_rmb goodsprice">20</i>
                </span>
                <span class="count">
                    <button class="reduce">-</button>
                    <button class="mount">1</button>
                    <button class="add">+</button>
                </span>
            </p>
            <p class="del">
                删除
            </p>
        </div>
    </li>
    <li class="list">
        <i class="iconfont icon-wancheng"></i>
        <div class="goods">
            <div class="goodsimg">
                <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2866394589,3241271447&fm=26&gp=0.jpg" alt="">
            </div>
            <div class="goodsinfo">
                <p class="goodstitle">
                    FSHANG凡尚D1能量一线三分头加粗提速安卓/Type-c/iPhone通用数据线
                </p>
                <p class="goodsattr">
                    <span>白色</span>
                    <span>白色</span>
                </p>
            </div>
            <p class="money">
                <span class="price">
                    <i class="iconfont icon-Icon_rmb goodsprice">10</i>
                </span>
                <span class="count">
                    <button class="reduce">-</button>
                    <button class="mount">1</button>
                    <button class="add">+</button>
                </span>
            </p>
            <p class="del">
                删除
            </p>
        </div>
    </li>
</ul>
<div class="footer">
    <div class="left">
        <i class="iconfont icon-wancheng1"></i>
        <span>全选</span>
    </div>
    <div class="right">
        <p class="money">
            合计:<i class="iconfont icon-Icon_rmb totalmoney">0</i>
        </p>
        <p class="jisuan">
            结算(<span class="num">0</span>)
        </p>
    </div>
</div>
<div class="tip"></div>

css:

body,html{
    background-color: #F8F8F8;
}
.container{
    padding: 15px;
}
.list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 10px;
    margin-bottom: 10px;
}
.icon-wancheng{
    color: #ccc;
    margin-right: 10px;
}
.goods{
    /*display: flex;*/
    /*justify-content: space-between;*/
}
.goodsimg{
    width: 100px;
    height: 100px;
    float: left;
    margin-right: 10px;
}
.goodsimg img{
    width: 100%;
    height: 100%;
}
.goodstitle{
    font-size: 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    text-align: justify;
    overflow: hidden;
}
.goodsattr{
    margin-top: 5px;
    font-size: 12px;
}
.money{
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.money .price{
    font-size: 12px;
    color: #FE547B;
}
.icon-Icon_rmb{
    font-size: 12px;
}
.count button{
    display: inline-block;
    width: 20px;
    height: 20px;
    font-size: 12px;
    background-color: #fff;
    text-align: center;
    border: 1px solid #ccc;
    float: left;
}
.count button:nth-child(1){
    border-right: 0;
}
.count button:nth-child(2){
    width: 30px;
}
.count button:nth-child(3){
    border-left: 0;
}
.del{
    margin-top: 5px;
    text-align: right;
    font-size: 12px;
    color: #FE547B;
}

.footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
}
.icon-wancheng1{
    color: #ccc;
    margin-right: 0;
}
.footer .right{
    display: flex;
    justify-content: space-between;
}
.footer .right .totalmoney{
    display: flex;
    align-items: center;
    margin-right: 10px;
}
.footer .right .totalmoney .icon-Icon_rmb{
    color: #FE547B;
}
.footer .right .jisuan{
    padding: 10px 15px;
    background-color: #FE547B;
    color: #fff;
}

.tip{
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    height: 40px;
    padding: 0 10px;
    border-radius: 5px;
    background-color: rgba(0,0,0,0.7);
    text-align: center;
    line-height: 40px;
    color: #fff;
    z-index: 999;
    display: none;
}
.select{
    color: #05BD03;
}
.selectall{
    color: #05BD03;
}

js:

$(function(){
    let totalMoney = 0;
    let price = $('.price');
    let num = $('.mount');
    // 选中当前商品
    $('.icon-wancheng').each((i,val) => {
        $(val).click(function(){
            let classname = $(val).attr('class'),
                price = $('.goodsprice').eq(i).html(),
                num = $('.mount').eq(i).html();
            if(classname.indexOf('select') == -1){
                $(this).addClass('select');
                totalMoney += getMoney(price,num)
            }else{
                $(this).removeClass('select');
                totalMoney -= getMoney(price,num)
            }
            if($('.select').length == $('.icon-wancheng').length){
                $('.icon-wancheng1').addClass('selectall');
            }else{
                $('.icon-wancheng1').removeClass('selectall');
            }
            $('.num').html( $('.select').length);
            $('.totalmoney').html(totalMoney);
        })
    })

    let active = true;
    // 全选
    $('.icon-wancheng1').click(function(){
        let $that = $(this);    // 解决this指向
        let classname = $(this).attr('class');
        $('.icon-wancheng').each((i,val) => {
            let price = $('.goodsprice').eq(i).html();
            let num = $('.mount').eq(i).html();
            if(classname.indexOf('selectall') == -1){
                $that.addClass('selectall');
                if($(val).attr('class').indexOf('select') == -1){
                    $(val).addClass('select');
                    totalMoney += getMoney(price,num);
                }
                $('.num').html( $('.icon-wancheng').length);
            }else{
                $(this).removeClass('selectall');
                $(val).removeClass('select');
                $('.num').html(0);
                totalMoney = 0;
            }
        })
        active = !active;
        $('.totalmoney').html(totalMoney);
    });

    // 减少商品数量
    $('.reduce').each((i,val) => {
        $(val).click(function(){
            let price = $('.goodsprice').eq(i).html();
            let num = $('.mount').eq(i).html();
            if(num == 1){
                $('.tip').fadeIn().html('该宝贝不可以再减少了')
                setTimeout(() => {
                    $('.tip').fadeOut()
                },2000)
                return;
            }
            num--;
            $('.mount').eq(i).html(num);
            if($('.select').length == 0){
                $('.totalmoney').html(0);
            }else{
                totalMoney -= getMoney(price,1)
                $('.totalmoney').html(totalMoney);
            }
        })
    })

    // 增加商品数
    $('.add').each((i,val) => {
        $(val).click(function(){
            let price = $('.goodsprice').eq(i).html();
            let num = $('.mount').eq(i).html();
            num++;
            $('.mount').eq(i).html(num);
            if($('.select').length == 0){
                $('.totalmoney').html(0);
            }
            if($('.icon-wancheng').eq(i).attr('class').indexOf('select') != -1){
                totalMoney += getMoney(price,1);
                $('.totalmoney').html(totalMoney);
            }
        })
    })

    // 删除商品数
    $('.del').each((i,val) => {
        $(val).click(function(){
            let $that = $(this);    //解决ajax this指向
            let price = $('.goodsprice').eq(i).html();
            let num = $('.mount').eq(i).html();
            $that.parent().parent().remove();
            if($('.select').length == 0){
                $('.totalmoney').html(0)
                $('.num').html(0);
                $('.icon-wancheng1').removeClass('selectall')
            }else{
                totalMoney -= getMoney(price,num)
                $('.totalmoney').html(totalMoney)
                $('.num').html( $('.icon-wancheng').length);
            }
        })
    })

    // 获取总价
    function getMoney(price,num){
        return price * num
    }
})