jQuery 购物车模块

最新推荐文章于 2024-07-24 21:48:20 发布

婷宝_知萌

最新推荐文章于 2024-07-24 21:48:20 发布

阅读量797

点赞数 3

文章标签： jquery css3

本文链接：https://blog.csdn.net/weixin_58017233/article/details/125691164

版权

参考pink 老师

jQuery 购物车是一个比较经典的案例，我参考pink 老师的视频自己制作出来了简单版的购物车模块

首先，问你需要知道一个购物车的功能

1.添加商品（在这个案例中购物车里的商品数量是固定的所以我们是对现有购物车里的商品进行选择）

2.选中商品后商品总数的++ --

3.修改小计金额

4.修改总金额

5.删除商品选项

附效果图一张


css样式 

<style>

    img {

        width: 100px;

        height: 100px;

        margin-left: -120px;

    }



    * {

        margin: 0;

        padding: 0;

    }



    ul li a {

        list-style: none;



    }



    a {

        text-decoration: none;

        color: black;

    }



    .cart-thead {

        display: flex;

        justify-content: space-between;

        margin-left: 110px;

    }



    .cart-item {

        display: flex;

        justify-content: space-between;

        margin-left: -80px;



    }



    .p-msg {

        margin-top: -89px;

        margin-left: 10px;

        width: 190px;

        height: 100px;

    }



    .cart-floatbar {

        float: left;

    }



    .btn-area {

        margin-top: -60px;

        margin-left: 1139px;

    }



    .p-num input {

        width: 36px;

        height: 10px;

    }



    .cart-thead {

        margin-left: 10px;

    }



    .check-cart-item{

background-color: rgb(181, 222, 167);

    }

</style>


<body>
    <div class="c-container">
        <div class="w">
            <div class="cart-filter-bar">
                <em>全部商品</em>
            </div>
            <!-- 购物车主要核心区域 -->
            <div class="cart-warp">
                <!-- 头部全选模块 -->
                <div class="cart-thead">
                    <div class="t-checkbox">
                        <input type="checkbox" name="" id="" class="checkall"> 全选
                    </div>
                    <div class="t-goods">商品</div>
                    <div class="t-price">单价</div>
                    <div class="t-num">数量</div>
                    <div class="t-sum">小计</div>
                    <div class="t-action">操作</div>
                </div>
                <!-- 商品详细模块 -->
                <div class="cart-item-list">
                    <div class="cart-item check-cart-item" >
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" checked class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="./file/img05.jpg" alt="">
                            </div>
                            <div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
                        </div>
                        <div class="p-price">￥12.60</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" rel="external nofollow" rel="external nofollow"
                                    rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                    rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                    rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                    class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" rel="external nofollow" rel="external nofollow"
                                    rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                    rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                    rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                    class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥12.60</div>
                        <div class="p-action"><a href="javascript:;" rel="external nofollow" rel="external nofollow"
                                rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                rel="external nofollow" rel="external nofollow" rel="external nofollow">删除</a></div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="./file/img03.jpg" alt="">
                            </div>
                            <div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽</div>
                        </div>
                        <div class="p-price">￥24.80</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" rel="external nofollow" rel="external nofollow"
                                    rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                    rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                    rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                    class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" rel="external nofollow" rel="external nofollow"
                                    rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                    rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                    rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                    class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥24.80</div>
                        <div class="p-action"><a href="javascript:;" rel="external nofollow" rel="external nofollow"
                                rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                rel="external nofollow" rel="external nofollow" rel="external nofollow">删除</a></div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="./file/img04.jpg" alt="">
                            </div>
                            <div class="p-msg">唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</div>
                        </div>
                        <div class="p-price">￥29.80</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" rel="external nofollow" rel="external nofollow"
                                    rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                    rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                    rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                    class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" rel="external nofollow" rel="external nofollow"
                                    rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                    rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                    rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                    class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥29.80</div>
                        <div class="p-action"><a href="javascript:;" rel="external nofollow" rel="external nofollow"
                                rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                rel="external nofollow" rel="external nofollow" rel="external nofollow"
                                rel="external nofollow" rel="external nofollow" rel="external nofollow">删除</a></div>
                    </div>
                </div>

                <!-- 结算模块 -->
                <div class="cart-floatbar">
                    <div class="select-all">
                        <input type="checkbox" name="" id="" class="checkall">全选
                    </div>
                    <div class="operation">
                        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow"
                            rel="external nofollow" rel="external nofollow" rel="external nofollow"
                            rel="external nofollow" rel="external nofollow" rel="external nofollow"
                            rel="external nofollow" rel="external nofollow" class="remove-batch"> 删除选中的商品</a>
                        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow"
                            rel="external nofollow" rel="external nofollow" rel="external nofollow"
                            rel="external nofollow" rel="external nofollow" rel="external nofollow"
                            rel="external nofollow" rel="external nofollow" class="clear-all">清理购物车</a>
                    </div>
                    <div class="toolbar-right">
                        <div class="amount-sum">已经选<em>1</em>件商品</div>
                        <div class="price-sum">总价： <em>￥12.60</em></div>
                        <div class="btn-area">去结算</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

// 入口函数
$(function () {
    // 1.全选，全不选功能模块 
    // 全选：就是把全选按钮(checkall )的状态赋值给 三个小按钮(j-checkbox) 就可以了
    // 事件可以使用 change 
    // 获取元素的固有属性prop 
    $(".checkall").change(function () {
        // console.log($(this).prop("checked"));
        // 隐式迭代
        //  当我点击的时候 不仅j-cjheckbox 按钮的状态要改变 里面的 checkall 的状态也要改变 
        // 因为有两个全选按钮 我们选中其中一个的时候 另一个也要发生变化
        $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"));
        // ********************背景颜色的个更改 未完成
        if ($(this).prop("checked")) {
            // 如果全选按钮点击之后的状态是 true 那么就返会 true 否则范湖 false   让所有的商品添加 check-cart-item 类名
            $(".cart-item").addClass(" check-cart-item");
        } else {
            // check-cart-item 移除这个类名
            $(".cart-item").removeClass(" check-cart-item");
        }
    });



    //  2.通过小的复选框 控制全选按钮 
    $(".j-checkbox").change(function () {
        // $(".j-checkbox").length 定义数组的长度 所有的小复选框的个数
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
        if ($(this).prop("checked")) {
            // 如果全选按钮点击之后的状态是 true 那么就返会 true 否则范湖 false   让所有的商品添加 check-cart-item 类名
            $(this).parents(".cart-item").addClass(" check-cart-item");
        } else {
            // check-cart-item 移除这个类名
            $(this).parents(".cart-item").removeClass(" check-cart-item");
        }
    });



    // 3.增加商品数量模块 首先声明一个变量 当我们点击+号 (increment),就让这个值++,然后赋值给文本框
    $(".increment").click(function () {
        // 点击加号 获得当前兄弟文本框的值
        var n = $(this).siblings(".itxt").val();
        // console.log(n);
        n++;
        $(this).siblings(".itxt").val(n);
        // 3. 计算小计模块 根据文本框的值 乘以当前商品的价格 就是商品小计
        // 当前商品的价已经拿到了
        var p = $(this).parent().parent().siblings(".p-price").html();
        // console.log(p);
        // 进行2字符串的截取
        p = p.substr(1);
        console.log(p);
        var price = (p * n).toFixed(2);   // 保留两位小数
        // 小计模块
        $(this).parent().parent().siblings(".p-sum").html("￥" + price);
        getSum();
    });
    $(".decrement").click(function () {
        // 点击加号 获得当前兄弟文本框的值
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
        }
        // console.log(n);
        n--;
        $(this).siblings(".itxt").val(n);
        // 3. 计算小计模块 根据文本框的值 乘以当前商品的价格 就是商品小计
        // 当前商品的价已经拿到了
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        // 进行2字符串的截取
        p = p.substr(1);
        console.log(p);
        // 小计模块
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        getSum();
    });



    // 4.用户修改文本框的值 计算小计模块
    // 先得到文本框里的值 乘以 商品的价格进行计算
    $(".itxt").change(function () {
        var n = $(this).val();
        // 当前商品的单价
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        // 进行2字符串的截取
        p = p.substr(1);
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        getSum();
    });



    // 5. 计算总计和总额模块
    // 在第一次打开页面的时候 就进行调用 函数
    getSum();
    function getSum() {
        var count = 0;  // 计算总件数
        var money = 0;   //计算总价钱
        $(".itxt").each(function (i, ele) {
            count += parseInt($(ele).val());  // 将字符型转换为数字型  已选商品总数里面的 数量
        });
        $(".amount-sum em").text(count);
        $(".p-sum").each(function (i, ele) {
            money += parseFloat($(ele).text().substr(1));    // 把值取出来 去掉 人民币符号 转化为浮点型
        });
        $(".price-sum em").text("￥" + money.toFixed(2));  // 总计金额的数量 保留两位小数
    }

    
    // 6.删除商品模块
    // 1）商品后面的删除按钮、
    $(".p-action a").click(function () {
        //  删除的是当前的商品
        $(this).parents(".cart-item").remove();
        getSum();
    });
    // 2）删除选中的商品
    $(".remove-batch").click(function () {
        // 删除的是小的复选框选中的按钮   这里面有一个隐式迭代 选中所有的父级 执行的是同一种操作 所以没有特意选中删除的类
        $(".j-checkbox:checked").parents(".cart-item").remove();
        getSum();
    })
    // 3）清空购物车 删除所有商品
    $(".clear-all").click(function () {
        $(".cart-item").remove();
        getSum();
    })
})
// })


、

注：记得引入