jquery实现购物车

效果图：
在这里插入图片描述
注意：
toFixed() 是将数值的计算结果保留指定的小数位数，但会自动转换为NumberObject 的字符串
获取jquery对象数组的方法有：get()和eq() ，get() 得到的是普通的对象，不支持继续链式调用；eq()得到的是jquery对象，支持继续链式调用
商品输入框的输入事件中，需要使用val()去得到输入的值(实时输入框的值)，而不是用attr()，因为attr()只能得到元素的value属性值，并不是用户现输入的值，就会出错。
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
    
    <div class="content">
        <div class="bar">
            <ul>
                <li>全部商品</li>
                <li>特价商品</li>
                <li>库存商品</li>
            </ul>
            <div class="barPriceBox">
                <div>已选商品</div>
                <div class="RMB">￥0.00</div>
                <button>结算</button>
            </div>
        </div>

        <div class="carTitle">
            <ul class="one_ul">
                <li><input class="all_check" type="checkbox" />全选</li>
                <li>商品信息</li>
            </ul>
            <ul class="two_ul">
                <li>单价</li>
                <li>数量</li>
                <li>金额</li>
                <li>操作</li>
            </ul>
        </div>

        <div class="car_box">
            <div class="goods_box">
                <div class="huodong_box">
                    <div class="huodong_label">满减活动</div>
                    <div class="huodong_detail">满2件打7.5折</div>
                </div>
                <div class="goods">
                    <div class="goods_info">
                        <input class="goods_itme_check" type="checkbox" />
                        <image src="https://img.alicdn.com/bao/uploaded/i3/725677994/O1CN017L33aJ28vIk1G2nwR_!!0-item_pic.jpg_80x80.jpg" />
                        <div class="goods_title">
                            妮维雅男士水活小蓝管补水保湿润肤露乳液面霜补水保湿男生擦脸油
                        </div>
                    </div>
                    <div class="specification">
                        <div>化妆品净含量： 50g</div>
                    </div>
                    <div class="price">
                        <div>￥89.00</div>
                    </div>
                    <div class="num">
                        <div class="tool">
                            <button class="less">-</button>
                            <input value="1">
                            <button class="add">+</button>
                        </div>
                    </div>
                    <div class="sum_price">
                        <div>￥89.00</div>
                    </div>
                    <div class="operator">
                        <div class="operator_detail">
                            <div>移除收藏夹</div>
                            <div>删除</div>
                            <div>相似宝贝</div>
                        </div>
                    </div>
                </div>
            </div>

             <div class="goods_box">
                <div class="huodong_box">
                    <div class="huodong_label">满减活动</div>
                    <div class="huodong_detail">满2件打7.5折</div>
                </div>
                <div class="goods">
                    <div class="goods_info">
                        <input class="goods_itme_check" type="checkbox" />
                        <image src="https://img.alicdn.com/bao/uploaded/i2/849090736/O1CN01AOoEvi1HJ7z45mpwu_!!849090736.jpg_80x80.jpg" />
                        <div class="goods_title">
                            家用透明玻璃杯无盖水杯茶杯玻璃杯子早餐牛奶杯奶茶饮料杯啤酒杯
                        </div>
                    </div>
                    <div class="specification">
                        <div>颜色分类：八角高杯</div>
                    </div>
                    <div class="price">
                        <div>￥2.80</div>
                    </div>
                    <div class="num">
                        <div class="tool">
                            <button class="less">-</button>
                            <input value="1">
                            <button class="add">+</button>
                        </div>
                    </div>
                    <div class="sum_price">
                        <div>￥2.80</div>
                    </div>
                    <div class="operator">
                        <div class="operator_detail">
                            <div>移除收藏夹</div>
                            <div>删除</div>
                            <div>相似宝贝</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="bottom_tool">
            <ul class="one_ul">
                <li><input class="all_check" type="checkbox" />全选</li>
                <li>删除</li>
                <li>移入收藏夹</li>
                <li>分享</li>
            </ul>
            <ul class="two_ul">
                <li>已选商品<text>0</text>件</li>
                <li>合计(不含运费):</li>
                <li class="RMB">￥0.00</li>
                <li><button>结算</button></li>
            </ul>
        </div>
        
    </div>
    


</body>
<style>
.content{
    position: absolute;
    top: 20%;
    left: 10%;
    width: 1000px;
    background-color: rgb(234, 234, 234);
}

.bar{
    display: flex;
    border-bottom: 2px solid grey;
    margin: 10px;
    background-color: white;
}

.bar ul{
    display: inline;
}

.bar ul li{
    display: inline-block;
    padding: 0 10px;
    border-left: 1px solid grey;
}

.barPriceBox{
    display: flex;
    position: relative;
    left: 40%;
}

.barPriceBox div{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px 10px;
}

.barPriceBox button{
    position: absolute;
    left: 200px;
    width: 60px;
    height: 30px;
    margin-top: 10px;
}

.carTitle ul{
    display: inline;
}

.carTitle ul li{
    display: inline-block;
    margin: 10px 0;
}

.one_ul li{
    padding-right: 40px;
}

.two_ul{
    margin-left: 30%;
}

.two_ul li{
    padding-right: 60px;
}

.goods_box{
    margin: 10px 10px;
    border: 1px solid grey;
}

.huodong_box{
    margin: 10px 100px;
}

.huodong_label{
    padding: 5px;
    background-color: pink;
}

.huodong_detail{
    margin: 5px 10px;

}

.huodong_box{
    display: flex;
}

.goods{
    display: flex;
    border-top: 1px solid grey; 
}

.goods_itme_check{
    position: relative;
    top: 30%;
    left: -10px;
}

.goods_info{
    display: flex;
    margin: 20px 40px;
}

.goods_title{
    margin-left: 10px;
    width: 200px;
}

.specification{
    border: 1px solid grey;
}

.specification div{
    margin-top: 40px;
    color: grey;
}

.price{
    width: 100px;
}

.price div{
    display: flex;
    justify-content: center;
    margin-top: 40px;

}

.num{
    width: 100px;
}

.tool{
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.tool div{
    display: flex;
    padding: 5px;
    border: 1px solid grey;
}

.tool  input{
    width: 30px;
    text-align: center;
}

.sum_price{
    width: 100px;
}

.sum_price div{
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.operator{
    width: 100px;
}

.operator_detail{
    margin: 30px 10px;
}

.bottom_tool{
    background-color: white;
    margin: 10px;
}

.bottom_tool ul{
    display: inline;
}

.bottom_tool ul li{
    display: inline-block;
    margin: 10px 0;
}

.bottom_tool .one_ul{
    margin-left: -10px;
}

.bottom_tool .one_ul li{
    padding-right: 20px;
}

.bottom_tool .two_ul{
    margin-left: 17%;
}

.bottom_tool .two_ul li{
    margin-right: 30px;
    padding: 0;
}

.bottom_tool .two_ul li button{
    position: absolute;
    left: 900px;
    top: 504px;
    width: 60px;
    height: 30px;
}

</style>
<script type="text/javascript">

$(function(){
    let goods_check_list = $(".car_box").find(".goods_itme_check");
    // 当商品的复选框勾选状态被改变时，判断是否全选
    goods_check_list.click(()=>{
        if($('.car_box').find(".goods_itme_check:checked").length == goods_check_list.length){
            $('input').prop('checked', true);
        }
        else{
            $('.all_check').prop('checked', false);
        }
        countPrice();
    })
    // 商品输入框事件
    $('.tool').find('input').on('input', function(event){
        let num = parseInt($(this).val());
        if(num == 0 || isNaN(num)){
            $(this).val('1');
            num = 1;
        }
        else{
            $(this).val(num);
        }
        let price = parseFloat($(this).parents('.num').siblings('.price').find('div').text().split('￥')[1]);
        let sum_price = '￥' + (price * num).toFixed(2);
        $(this).parents('.num').siblings('.sum_price').find('div').text(sum_price);
        countPrice();
    });
    // 全选
    $('.all_check').click(function(){
        $('input').prop('checked', $(this).prop('checked'));
        countPrice();
    })
    // 操作商品数量
    $('.less').click(function(){
        let num = parseInt($(this).siblings('input').prop('value')) - 1;
        if(num == 0)
            num = 1;
        $(this).siblings('input').prop('value', num);
        // 改变当前商品金额
        let price = parseFloat($(this).parents('.num').siblings('.price').find('div').text().split('￥')[1]);
        let sum_price = '￥' + (price * num).toFixed(2).toString();
        $(this).parents('.num').siblings('.sum_price').find('div').text(sum_price);
        countPrice();
    })
    $('.add').click(function(){
        let num = parseInt($(this).siblings('input').prop('value')) + 1;
        $(this).siblings('input').prop('value', num);
        // 改变当前商品金额
        let price = parseFloat($(this).parents('.num').siblings('.price').find('div').text().split('￥')[1]);
        let sum_price = '￥' + (price * num).toFixed(2).toString();
        $(this).parents('.num').siblings('.sum_price').find('div').text(sum_price);
        countPrice();
    })
    // 计算购物车总金额
    function countPrice(goods){
        let sum_price = 0;
        for(let i = 0;i < goods_check_list.length;i++){
            // 商品为勾选状态,则把商品价格加入购物车总金额
            if(goods_check_list.get(i).checked){
                let price = parseFloat(goods_check_list.eq(i).parent().siblings('.sum_price').text().split('￥')[1]);
                sum_price = sum_price + price;
            }
        }
        // 更新页面购物车总金额
        $('.RMB').text('￥' + sum_price);
    }
})

</script>
</html>
向程序猿蜕变的苦逼人类
发布了14 篇原创文章 · 获赞 1 · 访问量 585
私信关注
猜你喜欢
