前端js-----购物车全功能（jQuery）

最新推荐文章于 2023-08-09 11:22:30 发布
最新推荐文章于 2023-08-09 11:22:30 发布
阅读量616 收藏 8
点赞数
分类专栏： JavaScript Web前端 分享一下我的心得 文章标签： javascript jquery 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47339511/article/details/112360362
版权

效果图：
在这里插入图片描述
HTML&&CSS：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-3.4.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .tab {
            width: 500px;
            border-collapse: collapse;
            margin: 0 auto;
        }
        
        .tab td,
        th {
            border: 1px solid #000;
        }
        
        .tab .num {
            width: 20px;
        }
        
        .tab .add,
        .sub {
            width: 20px;
        }
        
        .current {
            background-color: pink;
        }
    </style>
</head>

<body>
    <table class="tab">
        <thead>
            <th>全选 <input type="checkbox" name="" value="" class="checkAll">
                <input type="checkbox" name="" value="" class="checkAll">
            </th>
            <th>商品名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" class="ed" /></td>
                <td>电脑</td>
                <td class="price">￥200.20</td>
                <td>
                    <button type="button" class="sub">-</button>
                    <input type="text" name="" value="1" class="num">
                    <button type="button" class="add">+</button>
                </td>
                <td class="small_total">￥200.20</td>
                <td class="delete">删除</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="ed" /></td>
                <td>手机</td>
                <td class="price">￥100.30</td>
                <td>
                    <button type="button" class="sub">-</button>
                    <input type="text" name="" value="1" class="num">
                    <button type="button" class="add">+</button>
                </td>
                <td class="small_total">￥100.30</td>
                <td class="delete">删除</td>
            </tr>
            <tr>
                <td><input type="checkbox" class="ed" /></td>
                <td>空调</td>
                <td class="price">￥1000.99</td>
                <td>
                    <button type="button" class="sub">-</button>
                    <input type="text" name="" value="1" class="num">
                    <button type="button" class="add">+</button>
                </td>
                <td class="small_total">￥1000.99</td>
                <td class="delete">删除</td>
            </tr>
        </tbody>
    </table>
    <div>
        <span>已选<span style="color: red;" class="num_sum">1</span>件商品</span>
        <span>总计:</span>
        <span class="sum" style="color: red;">0</span>
        <div><span style="color: red;" class="delSome">删除选中商品</span>
            <span style="color: red;" class="delAll">清空购物车</span>
        </div>
    </div>
    </body>

</html>

JS：

        //里面三个小的复选按钮选中状态跟着 全选按钮走
        //因为checked是复选框的固有属性，此时利用prop（）获取和设置该属性
        $(function() {
            getSum();
            $(".checkAll").change(function() {
                    // console.log($(this).prop("checked"));//全选按钮的状态
                    $(".ed,.checkAll").prop("checked", $(this).prop("checked"));
                    getSum();
                    if ($(".ed,.checkAll").prop("checked")) {
                        //如果全选，让所有商品添加类名（背景颜色）
                        $(".tab tbody").children().addClass("current");
                    } else {
                        $(".tab tbody").children().removeClass("current");
                    }
                })
                //如果所有小按钮的个数都被选了，全选按钮就选上，如果小按钮没有被选上，则全选按钮就不选上
                //：checked选择器，查找本选中的表单元素
            $(".ed").change(function() {
                // console.log($(".ed:checked").length);//小复选框选中的个数
                // console.log($(".ed").length);
                //console.log($(this).prop("checked"));
                if ($(".ed:checked").length === $(".ed").length) {
                    $(".checkAll").prop("checked", true);
                } else {
                    $(".checkAll").prop("checked", false);
                }
                getSum();
                if ($(this).prop("checked")) {
                    $(this).parents("tr").addClass("current");
                } else {
                    $(this).parents("tr").removeClass("current");
                }
            })

            $(".add").click(function() {
                let n = parseInt($(this).siblings(".num").val());
                //console.log(n);
                n++;
                $(this).siblings(".num").val(n);
                let price = $(this).parent().siblings(".price").html();
                price = price.substr(1);
                //console.log(price);
                $(this).parent().siblings(".small_total").text("￥" + (n * price).toFixed(2));
                getSum();
            })
            $(".sub").click(function() {
                    let n = parseInt($(this).siblings(".num").val());
                    //console.log(n);
                    if (n === 1) {
                        return false;
                    }
                    n--;
                    $(this).siblings(".num").val(n);
                    let price = $(this).parent().siblings(".price").html();
                    price = price.substr(1);
                    //console.log(price);
                    $(this).parent().siblings(".small_total").text("￥" + (n * price).toFixed(2));
                    getSum();
                })
                //用户也可以直接修改表单num里面的值（小bug），同样计算小计
            $(".num").change(function() {
                let n = $(this).val();
                let price = $(this).parent().siblings(".price").html();
                price = price.substr(1);
                $(this).parent().siblings(".small_total").text("￥" + (n * price).toFixed(2));
                getSum();
            })

            function getSum() {
                let count = 0; //计算总件数
                let money = 0; //计算总价钱
                $(".num").each(function(index) {
                    if ($(".ed").eq(index).prop("checked") == true) {
                        count += parseInt($(".num").eq(index).val());
                        money += parseFloat($(".small_total").eq(index).text().substr(1));
                    }
                })
                $(".num_sum").html(count);
                $(".sum").html(money.toFixed(2));
            }

            //删除商品模块
            //点击删除之后一定是删除当前的商品，所以从$(this)出发
            $(".delete").click(function() {
                    //删除的是当前的商品
                    $(this).parent().remove();
                    $(".ed").change();
                    getSum();
                    clearCheckAll();
                })
                //删除选定的商品:小的复选框如果选中就删除对应的商品
            $(".delSome").click(function() {
                    //删除的是选中的商品
                    $(".ed:checked").parent().parent().remove();
                    getSum();
                    clearCheckAll();
                })
                //清空购物车
            $(".delAll").click(function() {
                $(".tab tbody").empty();
                getSum();
                clearCheckAll();
            })

            function clearCheckAll() {
                if ($(".tab tbody")[0].innerText == '') {
                    $(".checkAll").prop("checked", false);
                }
            }
        })
Lsx～
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
用三种前端的方法实现简单的购物车功能
m0_67495466的博客
04-11 5139
通过javascript、jquery和vue三种方式实现简单的前端购物车功能开发
javascript购物车详解实现购物车完整功能(附效果图，完整代码)
热门推荐
笨鸟学飞的博客
08-11 4万+
我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。
购物车的实现
m0_65545927的博客
03-10 1972
用户添加购物车，只需要将要加入购物车的商品存入到Redis中即可。一个用户可以将多件商品加入购物车，存储到Redis中的数据可以采用Hash类型。我们发现个问题，就是用户将商品加入购物车，无论数量是正负，都会执行添加购物车，如果数量
前端实现购物车，创建订单和支付流程
m0_46631458的博客
07-25 1759
可以为购物车页面添加一些交互功能，比如点击商品列表中的某个商品可以跳转到商品详情页，点击加入购物车按钮可以将商品添加到购物车等。显示勾选的购物车数据：前端页面需要获取用户选择的商品信息，并将其展示在订单页面上，包括商品名称、价格、数量等信息。后端接收到支付请求后，根据订单信息调用相应的支付接口，获取支付链接或二维码等支付凭证，并将其返回给前端。用户点击支付按钮后，前端向后端发送支付请求，传递支付所需的参数，如订单信息、支付金额等。前端可以在支付完成的回调函数中处理支付结果，如展示支付成功或失败的提示信息。
电商前台项目（五）：完成加入购物车功能和购物车页面
weixin_42044763的博客
01-30 4937
这里要注意，这个项目的接口给的都是params参数，而使用axios发请求，params参数只能拼接在url地址中，而query参数的配置项叫params，很奇怪。3、如果不写返回值，且await后是失败的Promise，那么就会抛出异常，既然抛出异常，那么async函数返回的就是一个失败的Promise。中遍历购物车数据并派发请求，（当然其实在组件中写也一样，就是这样规范点），用try-catch捕获，如果都请求成功，那么就使用。4、如果不写返回值，且await后是成功的Promise，那么就会返回。
Ruby-ROREcommerceRubyonRails电子商务平台
08-15
8.前端开发：利用Bootstrap或其他CSS框架美化界面，使用JavaScript和jQuery增强交互性。 9. 安全性：理解防止SQL注入、XSS攻击等安全措施。 10. 部署：了解如何将应用部署到Heroku、AWS或其他云平台。 通过学习和...
前端课设-二手商城-网页设计
07-27
购物车功能可能也需要JavaScript来处理添加、删除和计算总价等逻辑。 在"second-hand"文件夹中，我们可以预见到包含这些功能实现的源代码文件，可能包括HTML文件（如index.html）、CSS文件（如style.css）和...
JavaEE求职简历-姓名-JAVA开发工程师.doc
06-03
- **前端技术**：掌握JavaScript、HTML/CSS、jQuery和Ajax，了解Vue.js等现代前端框架。 - **分布式技术**：熟悉Zookeeper（分布式协调服务）、Nginx（负载均衡和动静分离）、FastDFS（分布式文件系统）和ActiveMQ...
jQuery手机购物车商品结算代码.zip
07-04
【jQuery手机购物车商品结算代码】是一个专为手机端设计的购物车功能实现，它集成了多种购物车操作，如全选、全不选、局部全选以及全选判定等功能，同时还提供了商品总价的计算。这个功能对于移动电商网站或者应用来...
Python项目开发-51商城设计源代码+开发文档说明资料.zip
06-08
- 项目的前端部分可能使用HTML、CSS和JavaScript进行构建，可能还结合了Bootstrap、jQuery等库来提高用户体验和页面响应性。 4. **用户认证与授权**： - 为了实现用户注册、登录功能，项目可能采用了JWT（JSON ...
javascript实现商品购物车功能
09-27
纯javascript实现购物车，完成从商品页向购物车中添加商品，购物车中删除商品，更改商品数量，删除商品，全选单选等购物车操作，涉及到javascript中BOM,DOM,json,cookie等知识点的应用操作，综合性较强，对于javascript学习进阶有一定的帮助。
简单购物车jQuery实现
06-14
一个简单的使用jQuery实现的单页面购物车效果，可以实现添加到购物车，删除，数量和金额的增减，和合计金额的计算 等效果
实现购物车功能思路
weixin_68756217的博客
05-23 768
3. 后台数据处理：需要使用Java或其他后端语言处理前端传递的数据，包括添加、删除、修改等操作，同时需要将处理后的数据返回给前端页面。1. 前端页面设计：需要设计一个购物车页面，包括商品列表、数量、价格、总价等信息，以及添加、删除、修改等操作按钮。4. 数据库设计：需要设计一个购物车数据库，包括商品信息、数量、价格、总价等字段，以及相应的增删改查操作。2. Ajax技术：使用Ajax技术实现前端页面与后台数据交互，实现异步刷新页面，提高用户体验。
JavaWeb（10）——前端综合案例4（购物车示例）
最新发布
白白白鲤鱼的博客
08-09 4076
JavaWeb（10）——前端综合案例4（购物车示例）
前端实现购物车功能
cyj0919的博客
04-06 688
【代码】前端实现购物车功能。
Vue简单实现购物车全部功能
qing_xing_的博客
04-27 1万+
Vue简单实现购物车功能 本文用Vue简单实现了一下购物车功能，简单是指代码简单，只有50行，也指样式简单，愧对前端。话不多说，直接上图上代码吧！ 这是购物车的页面，虽然看着比较简陋，但麻雀虽小五脏俱全，数据用的是在state里面的固定数据。 先捋一下购物车的逻辑： 1、在选中该商品的时候，总价变为该商品的价格。 2、点击”+“或 ” - “的时候，商品的数量随之变化，总价也跟着变化。 3、当点击全选的时候，全部商品选中，总价变为如今商品价格*商品数量之和，取消全选的时候，价格变为0。 4
前端实战——实现购物车功能
qmqm33的博客
10-01 1万+
天猫实战——实现购物车功能 学习了一段时间前端，掌握了一些基本技能，只有进行实践操作，才能将自己学到的充分掌握。首页等一系列代码已经开源到github。 地址：https://github.com/qiaoj-ka 以下是对于购物车页面，以及一些交互。 ...
Js购物车功能实现
前端程序媛_Ying博客
12-04 680
购物车功能实现
web前端进阶_vue_购物车（商品选择（全选或者单选）、增加减少商品数量、删除商品、计算商品总和、商品信息和网络绑定）-基础篇11
qq_17495489的博客
08-30 2974
购物车 1:购物车效果 2、购物车代码： html 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>购物车</title> <link rel="stylesheet" type="text/css" href="css/index.css"/> <script src=
jQuery EasyUI 教程：快速入门拖放功能
<script type="text/javascript" src="../jquery-1.4.2.min.js"> <script type="text/javascript" src="../jquery.easyui.min.js"> <!-- 为了使用预定义的图标 --> ``` 教程内容分为多个部分，首先介绍了基础的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值