3. 购物车模块案例

最新推荐文章于 2024-04-19 10:15:13 发布
最新推荐文章于 2024-04-19 10:15:13 发布
阅读量209 收藏
点赞数
分类专栏： jQuery 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s12345672/article/details/120870859
版权

代码实现:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>我的购物车-品优购</title>
    <meta name="description"
        content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
    <!-- 引入facicon.ico网页图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- 引入css 初始化的css 文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共样式的css 文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入car css -->
    <link rel="stylesheet" href="css/car.css">
    <!-- 先引入jquery  -->
    <script src="js/jquery.min.js"></script>
    <!-- 在引入我们自己的js文件 -->
    <script src="js/car.js"></script>
</head>

<body>
    <!-- 顶部快捷导航start -->
    <div class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎您！ </li>
                    <li>
                        <a href="#">请登录</a>
                        <a href="#" class="style-red">免费注册</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="#">我的订单</a></li>
                    <li class="spacer"></li>
                    <li>
                        <a href="#">我的品优购</a>
                        <i class="icomoon"></i>
                    </li>
                    <li class="spacer"></li>
                    <li><a href="#">品优购会员</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">企业采购</a></li>
                    <li class="spacer"></li>
                    <li><a href="#">关注品优购</a> <i class="icomoon"></i></li>
                    <li class="spacer"></li>
                    <li><a href="#">客户服务</a> <i class="icomoon"></i></li>
                    <li class="spacer"></li>
                    <li><a href="#">网站导航</a> <i class="icomoon"></i></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 顶部快捷导航end  -->


    <div class="car-header">
        <div class="w">
            <div class="car-logo">
                <img src="images/logo.png" alt=""> <b>购物车</b>
            </div>
        </div>
    </div>

    </div>
    <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="upload/p1.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:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥12.60</div>
                        <div class="p-action"><a href="javascript:;">删除</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="upload/p2.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:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥24.80</div>
                        <div class="p-action"><a href="javascript:;">删除</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="upload/p3.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:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥29.80</div>
                        <div class="p-action"><a href="javascript:;">删除</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:;" class="remove-batch"> 删除选中的商品</a>
                        <a href="javascript:;" 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>

    <!-- footer start -->
    <div class="footer">
        <div class="w">
            <!-- mod_service -->
            <div class="mod_service">
                <ul>
                    <li>
                        <i class="mod-service-icon mod_service_zheng"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_kuai"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <i class="mod-service-icon mod_service_bao"></i>
                        <div class="mod_service_tit">
                            <h5>正品保障</h5>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- mod_help -->
            <div class="mod_help">
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item">
                    <dt>购物指南</dt>
                    <dd> <a href="#">购物流程 </a></dd>
                    <dd> <a href="#">会员介绍 </a></dd>
                    <dd> <a href="#">生活旅行/团购 </a></dd>
                    <dd> <a href="#">常见问题 </a></dd>
                    <dd> <a href="#">大家电 </a></dd>
                    <dd> <a href="#">联系客服 </a></dd>
                </dl>
                <dl class="mod_help_item mod_help_app">
                    <dt>帮助中心</dt>
                    <dd>
                        <img src="upload/erweima.png" alt="">
                        <p>品优购客户端</p>
                    </dd>
                </dl>
            </div>

            <!-- mod_copyright  -->
            <div class="mod_copyright">
                <p class="mod_copyright_links">
                    关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U
                </p>
                <p class="mod_copyright_info">
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
                    京ICP备08001421号京公网安备110108007702
                </p>
            </div>
        </div>
    </div>
    <!-- footer end -->
</body>
</html>

$(function () {
    // 1. 全选 全不选功能模块
    // 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
    // 事件可以使用change
    $(".checkall").change(function () {
        // console.log($(this).prop("checked"));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
        if ($(this).prop("checked")) {
            // 让所有的商品添加 check-cart-item 类名
            $(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(".cart-item").removeClass("check-cart-item");
        }
    });
    // 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
    $(".j-checkbox").change(function () {
        // if(被选中的小的复选框的个数 === 3) {
        //     就要选中全选按钮
        // } else {
        //     不要选中全选按钮
        // }
        // console.log($(".j-checkbox:checked").length);
        // $(".j-checkbox").length 这个是所有的小复选框的个数
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
        if ($(this).prop("checked")) {
            // 让当前的商品添加 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. 计算小计模块 根据文本框的值 乘以 当前商品的价格  就是 商品的小计

        // 得到当前商品的价格 p
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        // console.log(typeof p); String
        //<div class="p-price">￥12.60</div>  
        p = p.substr(1);    //去除第一个字符 ￥
        console.log(p);
        var price = (p * n).toFixed(2);//2:
        // 小计模块 
        // toFixed(2) 可以让我们保留2位小数
        $(this).parents(".p-num").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);
        // var p = $(this).parent().parent().siblings(".p-price").html();
        // parents(".p-num") 返回指定的祖先元素
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        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);
        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; // 计算总价钱
        //i: 元素的索引号    ele: 每个dom对象
        $(".itxt").each(function (i, ele) {
            count += parseInt($(ele).val());
            // console.log(count);
        });
        //amount-sum: 已经选择的商品数
        $(".amount-sum em").text(count);
        //p-sum: 每种商品的总价
        $(".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();
    })
})
Sun Jiakai_凯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 属性操作——案例：购物车案例模块
qq_39368007的博客
11-29 1388
案例：购物车案例模块-全选
jquery购物车案例
weixin_43849543的博客
05-03 3724
实现功能： 购物车的商品全选、增减商品数量、修改商品小计、计算商品总额、删除商品、选中商品添加背景 1.购物车的商品全选、计算商品总额 2.全不选 3.增减商品数量、修改商品小计、选中商品添加背景 4.删除商品 删除后： 5.删除所选商品 删除后： 6.清空购物车 清空后： 代码部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta n
JQuery案例：购物车加减
weixin_30242907的博客
07-12 123
购物车加减 <head> <meta charset="UTF-8"> <title>加减购物车</title> <style type="text/css"> input { width: 35px; height: 35px; ...
JQuery 购物车案例
qq_29691213的博客
07-08 740
本文介绍用JQuery实现购物车案例相关功能 界面如下 主要功能为： 1.单选全选按钮 当单选按钮全选中时全选按钮也被选中，选中商品高亮效果 2.商品数量++ -- 功能，商品数量输入框功能 删除商品功能。 3.单个商品小计，总商品数量计算，总价计算。 4.清空购物车及删除选中商品。 一.全选功能 //1 全选功能 $('.checkall').change(function () { var check = $(this).prop('checke
jQuery购物车案例
weixin_56665165的博客
05-06 717
JQuery购物车案 全选模块 $('.checkall').change(function(){ //console.log($(this).prop("checked")); $('.j-checkbox, .checkall').prop("checked",$(this).prop("checked")); if($(this).prop("checked")){ $('.cart-item').addClass("check-
仿淘宝购物车功能模块案例.zip
12-30
在本案例中，"仿淘宝购物车功能模块"是一个典型的前端开发项目，主要涉及JavaScript和HTML技术。这个项目旨在模拟淘宝网的购物车系统，帮助学习者理解和实践电商平台中的购物车逻辑。以下是对这个功能模块的详细分析...
案例：购物车案例模块-全选
01-18
"购物车案例模块-全选"通常是指在购物车页面上实现的全选功能，允许用户一键选择所有商品。这个案例可能涵盖了前端开发、用户交互设计以及后端数据处理等多个方面。下面我们将详细探讨相关的知识点。 1. **前端开发...
vins的项目案例.txtvins的项目案例.txtvins的项目案例.txt
最新发布
07-13
### vins的项目案例——在线购物系统 #### 一、项目背景 随着互联网技术的不断发展以及电子商务行业的蓬勃兴起，越来越多的消费者倾向于通过线上平台来进行购物。这种趋势不仅为消费者提供了更多的选择，同时也...
vue3 项目购物车 + 动画效果
03-16
Vue3 是一款流行的前端框架，用于构建用户界面。在“vue3 项目购物车 + 动画效果”这个项目中，开发者使用了 Vue3 的特性来实现一个具有动画效果...对于想要学习Vue3和动画集成的开发者来说，这是一个很好的实践案例。
android 购物车模块...能增加删除 还有动画效果
09-01
在Android开发中，购物车模块是移动应用中的关键组成部分，特别是在电商应用中。这个模块允许用户选择商品并将其添加到虚拟购物车，以便后续结账。在这个特定的案例中，我们关注的是一个实现了购物车功能的Android...
前端：jQuery,购物车案例
03-28
实现步骤： (1) 使用实现数据渲染 (2)每个+按钮实现数字加1总价更新 (3)每个-按钮实现数字减1总价更新 (4)每个删除按钮实现整行商品删除 (5)点击每个全选按钮将所有输入框都选中 (6)点击底部删除按钮删除选中的li (7)每一个主体商品复选框被选中的时候判断全选按钮是否需要被选中
jquery -购物车案例
peixiancccc的博客
04-07 272
前端面试题汇总前端面试题是我面试过程中遇到的面试题，每一次面试后我都会复盘总结。
HTML期末学生大作业-奶茶网页作业html+css+javascript
2401_84092068的博客
04-19 337
整理面试题，不是让大家去只刷面试题，而是熟悉目前实际面试中常见的考察方式和知识点，做到心中有数，也可以用来自查及完善知识体系。《前端基础面试题》，《前端校招面试题精编解析大全》，《前端面试题宝典》，《前端面试题：常用算法》PDF完整版点击这里免费领取年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**[外链图片转存中…(img-vmmQuLfV-1713492847142)]
JQuery购物车案例分析
weixin_46513544的博客
05-12 1342
案例分析：1、里面的复选框3个j-checkedbox选中（checked）跟着全选按钮（checkall）走 2、checked是复选框的固有属性，prop()方法来获取 3、把全选按钮状态赋值给小复选框就行了 4、每次点击小复选框就来判断，如果复选框选中的个数等于3，就把全选按钮选上，否则全选按钮不选 5、:checked选择器 :checked查找被选中的表单元素 增减商品数量分析模块 1、...
基于jQuery------购物车案例
m0_63064861的博客
05-03 1592
号，会改变总计和总额，如果用户修改了文本框里面的值同样会改变总计和总额。商品： 先判断小的复选框按钮是否选中状态，如果是选中，则删除对应的商品。小的复选框点击： 如果是选中状态，则当前商品添加背景，否则移除背景。选按钮点击：如果全选是选中的，则所有的商品添加背景，否则移除背景。号，根据文本框的值 乘以 当前商品的价格 就是 商品的小计。： 这个变量初始值应该是这个文本框的值，在这个值的基础上。： 只能增加本商品的小计， 就是当前商品的小计模块（核心思路：选中的商品添加背景，不选中移除背景即可。
jQuery实现简单购物车案例
qq_44053632的博客
08-16 3243
效果图： 实现全选、反选、新增一行、删除行（选中的多行删除）、复制行（选中的多行复制）、修改数量、删除的功能 html文件： <html> <head> <title>jQuery操作表格</title> <meta charset="UTF-8"/> <!--声明css代码域--> <style t...
jQuery实现购物车功能的案例
weixin_45658984的博客
02-28 3866
用jquery写了一个购物车的案例 功能如下 1,全选按钮和单个复选框的功能 2,商品数量的加减 3,单个商品总价随着商品数量的增减变化 4,实现了商品总数的变化 5,实现所有商品价钱之和随着商品的件数变化而变化 6,添加了单个商品删除功能 7,添加了清空购物车功能 下面是代码展示 <body> <div class="box"> <div c...
用html完成实验五：购物车，购物车功能：1.全选2.增减商品数量3.修改商品小计4. 计算总计和总额5. 购物车案例模块-删除商品模块
05-26
购物车 购物车 <th><input type="checkbox" id="check-all"> 商品名称 单价 数量 小计 操作 <td><input type="checkbox" class="check-item"> 商品1 <td>10 <td><button class="reduce-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值