jquery清空购物车小案例

实现效果

可实现功能

1. 数量增加、减少
2. 小计结算
3. 总商品数量、总价格计算
4. 移除购物车
5. 清空购物车

代码

HTML结构：

    <div class="box">
        <div class="title">

            <!-- 单价 -->
            <div class="bar price">单价</div>

            <!-- 数量 -->
            <div class="bar num">数量</div>

            <!-- 小计 -->
            <div class="bar totle">小计</div>

            <!-- 操作 -->
            <div class="bar done">操作</div>
        </div>
        <div class="content">
            <div class="item">

                <!-- 图片展示 -->
                <div class="imgShow left">
                    <img src="imgs/hr.jpg" alt="">
                </div>

                <!-- 文字内容 -->
                <div class="text left">
                    <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
                    <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
                </div>

                <!-- 单价 -->
                <div class="s-price left">
                    &yen; <strong>1000.00</strong>
                </div>

                <!-- 数量 -->
                <div class="num1 left">
                    <a href="javascript:;" class="sub">-</a>
                    <input type="text" value="1">
                    <a href="javascript:;" class="add">+</a>
                </div>

                <!-- 总结 -->
                <div class="t_price left">
                    &yen;<strong>1000.00</strong>
                </div>

                <!-- 删除 -->
                <div class="del left">
                    <a href="javascript:;">移除购物车</a>
                </div>
            </div>
            <div class="item">

                <!-- 图片展示 -->
                <div class="imgShow left">
                    <img src="imgs/hr.jpg" alt="">
                </div>

                <!-- 文字内容 -->
                <div class="text left">
                    <p>荣耀20i 3200万AI自拍 超广角三摄 全</p>
                    <p>