← 返回首页
jQuery基础教程(十九)
发表时间：2022-12-16 11:09:52
购物车案例(手机版)

上节案例的手机版实现

1.cart.html(静态页面部分)

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <!-- 线上图标路径 -->
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1456778_ct57mue31dj.css">
    <link rel="stylesheet" href="css/shop.css">

    <!--引入jQueryCDN资源-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>

<!-- 顶部 -->
<div class="header">
    <span>< 返回</span>
    <span>购物车</span>
    <span>编辑</span>
</div>

<!-- 列表 -->
<div class="list">
    <div class="item">
        <input class="selectAll" type="checkbox">
        <img src="https://img.simoniu.com/good_66.jpg" alt="图片">
        <div class="item-right">
            <p>金鸽瓜子280克</p>
            <p class="price">
                &yen;<span>8.00</span>
                <span><img src="http://img.simoniu.com/taobao_minus.jpg" class="subNum"/><input type="text"
                                                                                                class="buyNum"
                                                                                                value="1"><img
                        src="http://img.simoniu.com/taobao_adding.jpg" class="addNum"/></span>
                <span><a class="deleteLink" href="javascript:void(0);">删除</a></span>
            </p>
        </div>
    </div>

    <div class="item">
        <input class="selectAll" type="checkbox">
        <img src="https://img.simoniu.com/good_33.jpg" alt="图片">
        <div class="item-right">
            <p>康师傅红烧牛肉面</p>
            <p class="price">
                &yen;<span>5.50</span>
                <span><img src="http://img.simoniu.com/taobao_minus.jpg" class="subNum"/><input type="text"
                                                                                                class="buyNum"
                                                                                                value="1"><img
                        src="http://img.simoniu.com/taobao_adding.jpg" class="addNum"/></span>
                <span><a class="deleteLink" href="javascript:void(0);">删除</a></span>
            </p>
        </div>
    </div>

    <div class="item">
        <input class="selectAll" type="checkbox">
        <img src="https://img.simoniu.com/good_38.jpg" alt="图片">
        <div class="item-right">
            <p>太阳牌锅巴</p>
            <p class="price">
                &yen;<span>6.00</span>
                <span><img src="http://img.simoniu.com/taobao_minus.jpg" class="subNum"/><input type="text"
                                                                                                class="buyNum"
                                                                                                value="1"><img
                        src="http://img.simoniu.com/taobao_adding.jpg" class="addNum"/></span>
                <span><a class="deleteLink" href="javascript:void(0);">删除</a></span>
            </p>
        </div>
    </div>

    <div class="item">
        <input class="selectAll" type="checkbox">
        <img src="https://img.simoniu.com/good_40.jpg" alt="图片">
        <div class="item-right">
            <p>vivo x60</p>
            <p class="price">
                &yen;<span>900.00</span>
                <span><img src="http://img.simoniu.com/taobao_minus.jpg" class="subNum"/><input type="text"
                                                                                                class="buyNum"
                                                                                                value="1"><img
                        src="http://img.simoniu.com/taobao_adding.jpg" class="addNum"/></span>
                <span><a class="deleteLink" href="javascript:void(0);">删除</a></span>
            </p>
        </div>
    </div>

    <div class="item">
        <input class="selectAll" type="checkbox">
        <img src="https://img.simoniu.com/good_46.jpg" alt="图片">
        <div class="item-right">
            <p>蒙牛纯牛奶</p>
            <p class="price">
                &yen;<span>4.00</span>
                <span><img src="http://img.simoniu.com/taobao_minus.jpg" class="subNum"/><input type="text"
                                                                                                class="buyNum"
                                                                                                value="1"><img
                        src="http://img.simoniu.com/taobao_adding.jpg" class="addNum"/></span>
                <span><a class="deleteLink" href="javascript:void(0);">删除</a></span>
            </p>
        </div>
    </div>

    <div class="item">
        <input class="selectAll" type="checkbox">
        <img src="https://img.simoniu.com/good_52.jpg" alt="图片">
        <div class="item-right">
            <p>徐福记沙琪玛</p>
            <p class="price">
                &yen;<span>18.00</span>
                <span><img src="http://img.simoniu.com/taobao_minus.jpg" class="subNum"/><input type="text"
                                                                                                class="buyNum"
                                                                                                value="1"><img
                        src="http://img.simoniu.com/taobao_adding.jpg" class="addNum"/></span>
                <span><a class="deleteLink" href="javascript:void(0);">删除</a></span>
            </p>
        </div>
    </div>

</div>

<!-- 结算 -->
<div class="balance">
    <div class="balance-left">
        <input id="selectAllCheckbox" type="checkbox">
        <span>全选</span>
        <span><a class="deleteSelectedLink" href="javascript:void(0);" onclick="deleteSelectedItems()">删除</a></span>
    </div>
    <div class="balance-right">
        合计：<span id="totalPrice" style="color:red;">0.00</span>
        <button onclick="showCartInfo()">结算</button>
    </div>
</div>

<!-- 底部 -->

<div class="footer">
    <div class="footer-list">
        <i class="iconfont icon-home"></i>
        <span>首页</span>
    </div>

    <div class="footer-list">
        <i class="iconfont icon-fenlei-copy"></i>
        <span>分类</span>
    </div>

    <div class="footer-list">
        <i class="iconfont icon-tubiaolunkuo-"></i>
        <span>购物车</span>
    </div>

    <div class="footer-list">
        <i class="iconfont icon-wode"></i>
        <span>我的</span>
    </div>
</div>

<script>

    //购物车json对象。
    let cart={
        itemsList: [],
        totalPrice : 0.0
    };

    function showCartInfo(){
        console.log("-----------当前购物车信息------------");
        console.log(cart);
    }

    //获得prices节点的集合。
    //初始化购物车的总金额
    function initTotalPrice() {
        let itemNodes = $(".price");
        let totalPrice = 0;

        cart.itemsList = [];
        cart.totalPrice = 0.0;

        for (let i = 0; i < itemNodes.length; i++) {
            //console.log("当前元素是："+itemNodes[i]);
            //获得单价怎么获得。
            let price = parseFloat($($(itemNodes[i]).children("span")[0]).text());
            let buyNumber = $($($(itemNodes[i]).children("span")[1]).children("input")[0]).val();
            let name = $(itemNodes[i]).prev().text();
            let item = {
                'name': name,
                'price': price,
                'buyNumber': parseInt(buyNumber)
            }
            //把商品对象添加到购物车商品集合中
            cart.itemsList.push(item);
            totalPrice += price * buyNumber;
        }

        totalPrice = totalPrice.toFixed(2);
        //更新购物车对象的总金额
        cart.totalPrice = parseFloat(totalPrice);
        $("#totalPrice").text(totalPrice);
    }

    //增加购买数量
    function addBuyNumber(obj) {
        //寻找obj的前一个兄弟节点
        let num = parseInt($($(obj).prev()).val());
        if (num < 100) {
            num++;
        }
        $($(obj).prev()).val(num);
        initTotalPrice();  //重新计算购物车的总金额
    }

    //减少购买数量
    function subBuyNumber(obj) {
        //console.log('减少购买数量...')
        let num = parseInt($($(obj).next()).val());
        if (num > 1) {
            num--;
        }
        $($(obj).next()).val(num);
        initTotalPrice(); //重新计算购物车的总金额
    }

    //删除商品
    function deleteItem(obj) {
        $(obj).parent().parent().parent().parent().remove();
        initTotalPrice();
    }

    //删除选中的商品
    function deleteSelectedItems() {
        //判断一下是否是清空购物车。
        if ($("#selectAllCheckbox").prop("checked")) {
            $(".list").empty();
            $("#totalPrice").text('0.00');
            initTotalPrice();
        } else {
            $.each($(".selectAll"), (i, e) => {
                //console.log(e.checked);
                if (e.checked) {
                    $(e).parent().remove();
                    initTotalPrice();
                }
            })
        }
    }

    //给图片添加增加数量事件
    $(".addNum").click(function () {
        //console.log(this)
        addBuyNumber(this);
    })
    //给图片添加减少数量事件
    $(".subNum").click(function () {
        //console.log(this)
        subBuyNumber(this);
    })

    $(".deleteLink").click(function () {
        if (window.confirm("确认要删除该商品吗？")) {
            deleteItem(this);
        }
    })

    $("#selectAllCheckbox").click(function () {
        $(".selectAll").prop("checked", this.checked);
    })

    $(".selectAll").click(function () {
        //console.log('选中了checkbox...')
        $("#selectAllCheckbox").prop("checked", false);
    })

    initTotalPrice();

</script>
</body>
</html>

2.shop.css（样式表部分）

@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f4f4f4; /* 背景颜色设置为#f4f4f4 */
}

.header {
    top: 0;
    width: 100%; /* 在自适应的移动端要保持宽度填充100% */
    height: 50px;
    background-color: #fff; /*顶部div背景颜色设置为白色*/
    position: fixed; /*把该整个顶部的位置设置为 固定位置*/
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header span:first-child {
    padding-left: 10px;
    color: red;
}

.header span:last-child {
    padding-right: 10px;
    color: red;
}

.list {
    margin-top: 51px;
    background-color: #fff;
    width: 100%;
    height: 860px;
}

.list .item {
    height: 120px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f6f6f6;
}

.list .item input {
    height: 20px;
    margin-left: 20px;
}

.list .item img {
    width: 95px;
    height: 95px;
    background-color: #f4f4f4;
    margin-left: 10px;

}

.list .item .item-right {

    flex-grow: 1; /*剩余空间全部分配给列表中右边的部分（弹性盒子：剩余空间分配）*/
    height: 95px;
    display: flex;
    flex-direction: column; /*将盒子的排列方向设置为列，也就是竖向（弹性盒子：排列方向：行row 列column）*/
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;

}

.list .item .price img{
    width: 12px;
    height: 12px;
}

.list .item .item-right .price {
    display: flex;
    justify-content: space-between;
}

.list .item .item-right .price span:first-child {
    color: red;
}

.list .item .item-right .price span:last-child {
    color: #c5b6b9;
}

.buyNum{
    width: 20px;
}

.deleteLink, .deleteSelectedLink{
    text-decoration: none;
    color: #999;
    padding: 12px;
}

.balance {
    bottom: 50px; /*距离底端设置为50px，left、right、top、bottom的使用前提是设置了固定位置，也就是说在有position:fixed;的基础上才可以使用*/
    height: 60px;
    width: 100%;
    background-color: #fff;
    position: fixed;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f6f6f6;

}

.balance .balance-left {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 20px;

}

.balance .balance-left input {
    height: 20px;

}

.balance .balance-left span {
    padding-left: 10px;

}

.balance .balance-right {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;

}

.balance .balance-right span {
    padding-right: 10px;
}

.balance .balance-right button {
    height: 40px;
    width: 110px;
    background-color: red;
    color: #fff;
    border-radius: 20px;
    border: 0;
}

.footer {

    bottom: 0;
    height: 50px;
    width: 100%;
    background-color: #fff;
    position: fixed;
    display: flex;
    justify-content: space-around;
    align-items: center;

}

.footer .footer-list {

    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.footer .footer-list .iconfont {
    font-size: 20px;
}

.footer .footer-list:nth-child(3) {
    color: red;
}

运行效果：