1. 首页首页
  2. 科技前沿科技前沿

2025年JS&JQ添加购物车功能

科技前沿 • • 阅读 71

JS&JQ添加购物车功能啥也不说 直接上代码 有小伙伴想要代码 全部代码在最后放 第一步 引入 script src jquery 3 3 1 min js 第二步 先写一个 function 函数 这里要说一下 这个 function 是最大的函数 包住全部 下面的图片是加入购物车 再下面是分部

大家好，我是讯享网，很高兴认识大家。

啥也不说。直接上代码！！！！
有小伙伴想要代码！全部代码在最后放
在这里插入图片描述
讯享网
第一步。引入script src=“jquery-3.3.1.min.js”
第二步。先写一个$ (function() {})函数。这里要说一下。这个$(function() {})是最大的函数。包住全部。下面的图片是加入购物车。再下面是分部

在这里插入图片描述

下面这些才是函数里面的东西、

添加购物车！！！！

在这里插入图片描述

第三步。先找到加入购物车的a标签。然后分别找到a标签父亲的兄弟的文本——图片、商品名称、折扣价

在这里插入图片描述
在这里插入图片描述

//获取购物车标签#goods tr td a $('#goods tr td a').click(function() { 
    //获取a标签父亲的第二个兄弟的文本——图片 var tup = $(this).parent().siblings().eq(1).html(); //获取a标签父亲的第二个兄弟的文本——商品名称 var name = $(this).parent().parent().children().eq(2).html(); //获取a标签父亲的第二个兄弟的文本——折扣价 var jin = $(this).parent().siblings().eq(3).html();

讯享网

这是判重。还是一个点击事件的代码

讯享网 //判重判断商品在购物车里是否存在 var flag = true; $('#cart tr').each(function() { 
    //判断name在新添加的name是否一致。这里的name是上面获取的 if ($(this).children().eq(2).text() == name) { 
    //已经存在 flag = false; //更新原来的数量 var num = parseFloat($(this).children().eq(3).text()); //更新原来的小计 var ji = parseFloat($(this).children().eq(5).text()); //计算数量 $(this).children().eq(3).text(num + 1); //计算小计 $(this).children().eq(5).text((num + 1) * jin); } }); //创建7个单元格 if (flag) { 
    var t1 = "<td><input type='checkbox'></td>";//选中 var tp = "<td>" + tup + "</td>";//图片 var mc = "<td>" + name + "</td>";//名称 var shu = "<td>" + 1 + "</td>"//数量 var jg = "<td>" + jin + "</td>"//价格 var xj = "<td>" + jin + "</td>"//小计 var sc = "<td><a href='#'>删除</a></td>"//删除按钮 //创建行 var tr = "<tr>" + t1 + "" + tp + "" + mc + "" + shu + "" + jg + "" + xj + "" + sc + "</tr>" //追加这一行 $("#cart").append(tr); } //增加 数量和总计 var num = 0;//数量 var sum = 0;//小计 //购物车行数循环 $("#cart tr").each(function() { 
    //购物车里面的 【数量】的文本。数量变化 num += parseFloat($(this).children().eq(3).text()); //购物车里面的【小计】的文本。小计就变化，价格不变 sum += parseFloat($(this).children().eq(5).text()); }); //从上面找到他们的id $("#allNum").text(num); $("#allMoney").text(sum); });

#cart就是添加购物车商品追加的容器。tr就是刚才创建的行

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

反选。中间有bug。不过小事情

在这里插入图片描述

删除！！

在这里插入图片描述

在这里插入图片描述

结束！拜拜！！！

<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script src="./jquery-3.3.1.min.js"></script>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        
        table {
            width: 1000px;
            border: 1px solid red;
            margin: 0px auto;
            border-collapse: collapse;
            text-align: center;
        }
        
        td,
        th {
            border: 1px solid red;
            height: 40px;
        }
        /* 对话框的样式设置 */
        /*遮罩层  */
        
        #mask {
            background-color: gray;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 100;
            opacity: 0.3;
            filter: alpha(opacity=30);
        }
        /*对话框整体布局  */
        
        #dialog {
            background-color: #fff;
            border: 3px solid orange;
            height: 200px;
            position: absolute;
            width: 300px;
            z-index: 101;
            display: none;
            position: absolute;
            left: 600px;
            top: 300px;
        }
        /*对话框头部背景  */
        
        #dialog div#title {
            background: #cccccc;
            overflow: hidden;
        }
        /*对话框头部中的关闭按钮布局  */
        
        #dialog p.close {
            float: right;
            padding-right: 10px;
            height: 24px;
            line-height: 24px;
            width: 40px;
            cursor: pointer;
            color: red;
        }
        /* 对话框中提示部分的布局 */
        
        #dialog div#infor {
            text-align: center;
            height: 80px;
            line-height: 80px;
        }
        /*对话框中确认按钮的布局  */
        
        #dialog div#sure {
            text-align: center;
            height: 30px;
            line-height: 30px;
        }
        /* 商品图片大小 */
        
        table img {
            width: 90px;
            height: 80px;
        }
        /* 结账按钮 */
        
        #buyAll {
            width: 120px;
            height: 50px;
            color: red;
            font-size: 30px;
        }
        
        table a {
            text-decoration: none;
            color: red;
        }
        
        table a :HOVER {
            color: blue;
        }
        
        .newClass {
            border: 5px solid yellow;
        }
        
        #menuDiv {
            height: 100px;
            margin: 0 auto;
            width: 800px;
        }
        
        #menuDiv a {
            text-decoration: none;
            color: black;
        }
        
        #menuDiv a:HOVER {
            color: orange;
        }
        
        #menuDiv ul {
            list-style: none;
            position: absolute;
        }
        
        #menuDiv ul li {
            width: 100px;
            height: 40px;
            line-height: 40px;
            float: left;
            border: 1px solid red;
            text-align: center;
            position: relative;
        }
        
        #menuDiv li.menuList ul {
            display: none;
        }
        
        caption {
            color: black;
            font-size: 30px;
            margin-bottom: 10px;
        }
        
        button {
            width: 90px;
            height: 30px;
            border-width: 0px;
            border-radius: 3px;
            background: #1E90FF;
            cursor: pointer;
            outline: none;
            font-family: Microsoft YaHei;
            color: white;
            font-size: 17px;
        }
        
        button:HOVER {
            background: #5599FF;
        }
        .f{
            position: absolute;
            display:none;
        }
    </style>
    
</head>

<body>
    <div id="menuDiv">
        <ul>
            <li><a href="#">首页 <ul class="f"><li>首页</li></ul></a></li>
            <li><a href="#">家纺家居<ul class="f"><li>首页</li></ul></a></li>
            <li><a href="#">智能家电<ul class="f"><li>首页</li></ul></a></li>
            <li><a href="#">手机电脑<ul class="f"><li>首页</li></ul></a></li>
            <li><a href="#">食品生鲜<ul class="f"><li>首页</li></ul></a></li>
        </ul>
    </div>

    <table id="goods">
        <caption>双十一选购会</caption>
        <tr>
            <th>编号</th>
            <th>图片</th>
            <th>商品名称</th>
            <th>折扣价(￥)</th>
            <th>抢抢抢！</th>
        </tr>
        <tr>
            <td>1001</td>
            <td><img src="../imgs/goods1.png"></img>
            </td>
            <td>闪迪64G存储卡行车记录仪</td>
            <td>74</td>
            <td><a href="#">加入购物车</a>
            </td>
        </tr>
        <tr>
            <td>1002</td>
            <td><img src="../imgs/goods2.png"></img>
            </td>
            <td>天际隔水电炖锅</td>
            <td>119</td>
            <td><a href="#">加入购物车</a>
            </td>
        </tr>
        <tr>
            <td>1003</td>
            <td><img src="../imgs/goods3.png"></img>
            </td>
            <td>创维55寸大屏电视</td>
            <td>3699</td>
            <td><a href="#">加入购物车</a>
            </td>
        </tr>
        <tr>
            <td>1004</td>
            <td><img src="../imgs/goods4.png"></img>
            </td>
            <td>美玲电冰箱</td>
            <td>2999</td>
            <td><a href="#">加入购物车</a>
            </td>
        </tr>
        <tr>
            <td>1005</td>
            <td><img src="../imgs/goods5.png"></img>
            </td>
            <td>大疆MAVICPRO无人机</td>
            <td>3000</td>
            <td><a href="#">加入购物车</a>
            </td>
        </tr>
    </table>
    <table id="carsTable" style="margin-top: 90px">
        <caption>购物车</caption>
        <thead>
            <tr>
                <th><input type="checkbox" />全选</th>
                <th>图片</th>
                <th>名称</th>
                <th>数量</th>
                <th>价格</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="cart">
        </tbody>
        <tfoot>
            <tr>
                <td colspan="6">数量是：<span id="allNum">0</span>个 价格是：￥<span id="allMoney">0</span>元</td>
                <td colspan="1"><button id="dellAll">批量删除</button></td>
            </tr>
        </tfoot>
    </table>
    <script>
        $(function() {
            //获取a标签
            var $li = $("#menuDiv>ul>li>a");
           //给li注册鼠标经过事件，让自己的ul显示出来
            $li.mouseenter(function () {
                //找到所有的儿子，并且还得是ul
                $(this).children("ul").stop().slideDown(200);
            });
        
            $li.mouseleave(function () {
                $(this).children("ul").stop().slideUp(200);
            });
        })
        $(function() {
            //获取购物车标签#goods tr td a
            $('#goods tr td a').click(function() {
                //获取a标签父亲的第二个兄弟的文本——图片
                var tup = $(this).parent().siblings().eq(1).html();
                //获取a标签父亲的第二个兄弟的文本——商品名称
                var name = $(this).parent().parent().children().eq(2).html();
                //获取a标签父亲的第二个兄弟的文本——折扣价
                var jin = $(this).parent().siblings().eq(3).html();
                //判重判断商品在购物车里是否存在
                var flag = true;
                $('#cart tr').each(function() {
                    //判断name在新添加的name是否一致
                    if ($(this).children().eq(2).text() == name) {
                        //已经存在
                        flag = false;
                        //更新原来的数量和小计
                        var num = parseFloat($(this).children().eq(3).text());
                        var ji = parseFloat($(this).children().eq(5).text());
                        $(this).children().eq(3).text(num + 1);
                        $(this).children().eq(5).text((num + 1) * jin);
                    }
                });
                //创建7个单元格
                if (flag) {
                    var t1 = "<td><input type='checkbox'></td>";
                    var tp = "<td>" + tup + "</td>";
                    var mc = "<td>" + name + "</td>";
                    var shu = "<td>" + 1 + "</td>"
                    var jg = "<td>" + jin + "</td>"
                    var xj = "<td>" + jin + "</td>"
                    var sc = "<td><a href='#'>删除</a></td>"
                    var tr = "<tr>" + t1 + "" + tp + "" + mc + "" + shu + "" + jg + "" + xj + "" + sc + "</tr>"
                    $("#cart").append(tr);
                }
                //增加总计
                var num = 0;
                var sum = 0;
                $("#cart tr").each(function() {
                    num += parseFloat($(this).children().eq(3).text());
                    sum += parseFloat($(this).children().eq(5).text());
                });
                $("#allNum").text(num);
                $("#allMoney").text(sum);

            });
            //全选
            $('#carsTable input[type="checkbox"]').click(function() {
                    //attr,prop
                    if ($(this).prop('checked')) {
                        $('#cart input[type="checkbox"]').each(function() {
                            $(this).prop('checked', true)
                        });
                    } else {
                        $('#cart input[type="checkbox"]').each(function() {
                            $(this.prop('checked', false))
                        });
                    }
                })
                //反选
            $("#cart").on("click", "input[type='checkbox']", function() {
                    var flag = true;
                    $("#cart input[type='checkbox']").each(function() {
                        if ($(this).prop("checked") == false) {
                            $("#carsTable thead input[type='checkbox']").prop("checked", false);
                            flag = false;
                        }
                    });
                    if (flag) {
                        $("#carsTable thead input[type='checkbox']").prop("checked", true);
                    }
                })
                //删除
            $('#carsTable').on("click", "a", function() {
                $(this).parent().parent().remove();
                zz();
            });
            //批量删除
            $('#dellAll').click(function() {
                $("#cart input[type='checkbox']").each(function() {
                    if ($(this).prop('checked') == true) {
                        $(this).parent().parent().remove();
                        zz();
                    };
                });
            });
        });
    </script>
</body>

</html>

```javascript
在这里插入代码片

讯享网
小讯
上一篇 2025-04-06 21:49
下一篇 2025-03-10 22:11

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/49578.html