jQuery的应用实践之购物车

其他 2020-03-19 13:34:47 阅读次数: 0

     最近学习了jQuery的内容，做一个小型购物车来练习巩固一下。

基本样式搭建
首先进行基本样式的搭建，在页面里添加几个div用来布局一些购物车所需要的模块。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>购物车</title>
</head>
<body>
<div>
    <div>
        <div>全选</div>
        <div>序号</div>
        <div>图片</div>
        <div>名称</div>
        <div>单价</div>
        <div>数量</div>
        <div>小计</div>
        <div>操作</div>
    </div>
</div>
</body>
</html>

效果如下：
在这里插入图片描述然后加入一些按钮和一些css样式：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>购物车</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .cart {
            margin: auto;
            width: 1000px;
            min-height: 30px;
        }
        .title {
            width: auto;
            height: 30px;
            border-bottom: 1px solid #c0c0c0;
        }
        .title > div {
            height: 30px;
            line-height: 30px;
            float: left;
            text-align: center;
            font-size: 13px;
        }
        .allck {
            position: relative;
            top: 2px;
        }
        .title_small {
            width: 100px;
        }
        .title_big {
            width: 200px;
        }
        .bot {
            overflow: hidden;
            background-color: #fefff3;
        }
        .bot_div {
            width: 150px;
            text-align: center;
            line-height: 40px;
            font-size: 13px;
            float: left;
        }
        .bot_div > input {
            position: relative;
            top: 2px;
        }
        .btn {
            float: right;
            width: 120px;
            line-height: 40px;
            background-color: red;
            color: #fff;
            text-align: center;
            font-size: 13px;
        }

    </style>
</head>
<body>
<div class="cart">
    <div class="title">
        <div class="title_small"><input class="allck" type="checkbox"/>全选</div>
        <div class="title_small">序号</div>
        <div class="title_small">图片</div>
        <div class="title_big">名称</div>
        <div class="title_small">单价</div>
        <div class="title_big">数量</div>
        <div class="title_small">小计</div>
        <div class="title_small">操作</div>
    </div>
    <div class="cartlist">
        <!--购物车的数据显示到这个容器里面-->
    </div>
    <div class="bot">
        <div class="bot_div">
            <input class="fckbtn" type="checkbox"/>反选
        </div>
        <div class="bot_div">
            总计：<span class="allprice">0.00</span>￥
        </div>
        <div class="btn">
            去结算>
        </div>
    </div>
</div>
</body>
</html>

效果如下：
在这里插入图片描述到这里，就开始用JS和jQuery来完成后面的工作。
首先写一些json对象来模拟从数据库中调取数据。

<script src="jquery/jquery.js"></script>
<script>
    $(function(){
        var cartData = [
            {
                "id": "1",
                "name": "电饭煲",
                "img": "./image/img1.jpg",
                "price": "128.3",
                "num": "1",
                "smalltotle": "128.3"
            },
            {
                "id": "2",
                "name": "电插板",
                "img": "./image/img2.jpg",
                "price": "98",
                "num": "1",
                "smalltotle": "98"
            },
            {
                "id": "3",
                "name": "太阳能",
                "img": "./image/img3.jpg",
                "price": "2499",
                "num": "1",
                "smalltotle": "2499"
            },
            {
                "id": "4",
                "name": "电路开关",
                "img": "./image/img4.jpg",
                "price": "58",
                "num": "1",
                "smalltotle": "58"
            },
            {
                "id": "5",
                "name": "全自动洗衣机",
                "img": "./image/img5.jpg",
                "price": "4899",
                "num": "1",
                "smalltotle": "4899"
            }
        ];
    });
</script>

注意：写jQuery代码前记得调用jQuery库，否则代码是不起作用的。
接下来是导入数据并且布局。操作代码如下所示：

<style>
        .cartsmall {
            height: 100px;
            line-height: 100px;
            float: left;
            text-align: center;
            font-size: 13px;
            border-bottom: 1px solid #c0c0c0;
        }
        .cartimg {
            width: 80px;
            height: 80px;
            border: 0;
            vertical-align: middle;
        }
        .cartpar {
            overflow: hidden;
        }
        .num_cart > button {
            display: inline-block;
            width: 25px;
            height: 25px;
            outline: none;
            border: 1px solid #c0c0c0;
            font-size: 14px;
        }
        .num_cart > input {
            width: 40px;
            height: 25px;
            line-height: 25px;
            display: inline-block;
            text-align: center;
            border: 1px solid #c0c0c0;
            outline: none;
            box-sizing: border-box;
        }
        .btn_remove {
            font-size: 13px;
            color: red;
            border-style: none;
            background-color: transparent;
            outline: none;
            cursor: pointer;
        }
        .cartbg {
            background-color: #fff1e3;
        }
    </style>

$(function(){
cartData.map(function (val) {
            //创建父容器
            var par = $("<div></div>");
            par.addClass("cartpar");
            //创建子容器
            var child1 = $("<div></div>");
            var input = $("<input type='checkbox'/>");
            input.addClass("iptck");
            child1.append(input);

            var child2 = $("<div></div>");
            child2.html(val.id);

            var child3 = $("<div></div>");
            var img = $("<img/>");
            img.addClass("cartimg");
            img.attr("src", val.img);
            child3.append(img);

            var child4 = $("<div></div>");
            child4.html(val.name);

            var child5 = $("<div></div>");
            child5.html("￥"+val.price)

            //造数量
            var child6 = $("<div></div>");
            child6.addClass("num_cart");
            var btn_left = $("<button class='btnleft'>-</button>");
            var num_txt = $("<input class='number' type='text' value='1'/>");
            var btn_right = $("<button class='btnright'>+</button>");
            child6.append(btn_left);
            child6.append(num_txt);
            child6.append(btn_right);

            var child7 = $("<div class='smallprice'></div>");
            child7.html("￥"+val.smalltotle);

            var child8 = $("<div></div>");
            var btn_a = $("<button class='btn_remove'>删除</button>");
            child8.append(btn_a);

            par.append(child1);
            par.append(child2);
            par.append(child3);
            par.append(child4);
            par.append(child5);
            par.append(child6);
            par.append(child7);
            par.append(child8);
            $(".cartlist").append(par);
            //添加css样式
            par.children().addClass("cartsmall title_small");
            par.children().eq(3).toggleClass("title_small title_big");
            par.children().eq(5).toggleClass("title_small title_big");
        });
});

效果如下所示：
在这里插入图片描述到这一步，基本的布局已经完成了，数据也导入完毕，接下来就是按钮和计算这些功能的实现。

逻辑功能实现：
实现全选、反选以及单选的功能：

$(".allck").click(function () {
            //判断当前复选框的状态
            if ($(this).prop("checked")) //true
            {
                $(".iptck").prop("checked", true);
                $(".cartpar").addClass("cartbg");//每行全部添加颜色
            }
            else {
                $(".iptck").prop("checked", false);
                $(".cartpar").toggleClass("cartbg");
            }
            addallprice();//计算总价
        });
        function ckallbox(obj) {
            //记录是否该让全选选择
            if (obj.prop("checked")) {
                ckcount++;
            }
            else {
                ckcount--;
            }
            if (ckcount == $(".iptck").length) {
                $(".allck").prop("checked", true);
            }
            else {
                //状态监测
                $(".allck").prop("checked", false);
            }
        }
        var ckcount = 0;
        $(".iptck").click(function () {
            ckallbox($(this));
            //判断当前的状态
            $(this).parents(".cartpar").toggleClass("cartbg");
            //点击单个的时候  判断当前的状态是否计算总价
            addallprice();
        });
        //反选功能
        $(".fckbtn").click(function () {
            $(".iptck").map(function (index, ele) {
                //检测当前元素的状态$(ele)
                if ($(ele).prop("checked")) {
                    $(ele).prop("checked", false);
                }
                else {
                    $(ele).prop("checked", true);
                }
                //当前的行变色
                $(".cartpar").eq(index).toggleClass("cartbg");
                ckallbox($(ele));
                addallprice();//计算总价
            });
        });

效果如下：
在这里插入图片描述在这里插入图片描述在这里插入图片描述下面是小计和总计功能的实现：

$(".btnleft").click(function () {
            var num = $(this).next().val();
            num--;
            if (num <= 1) {
                num = 1;
            }
            $(this).next().val(num);
            smallTottle($(this).parent(), num);//计算小计的方法
            addallprice();//计算总价
        });
        $(".btnright").click(function () {
            var num = $(this).prev().val();
            num++;
            $(this).prev().val(num);
            smallTottle($(this).parent(), num);//计算小计的方法
            addallprice();//计算总价
        });
        //计算小计的方法
        function smallTottle(par, number) {
            var price = parseFloat(par.prev().html().replace("￥", ""));
            par.next().html((price * number).toFixed(2) + "￥");
        }
        //计算总价的方法   根据当前行有没有被选择
        function addallprice() {
            //定义总价
            var allprice = 0;
            $(".iptck").each(function (index) {
                if ($(this).prop("checked"))//true  //计算当前行的总价
                {
                    var smallprice = parseFloat($(this).parent().siblings(".smallprice").html().replace("￥", ""));
                    allprice += smallprice;
                }
            });
            //直接给总计赋值
            $(".allprice").html(allprice.toFixed(2));
        }

效果如下：
在这里插入图片描述现在到这一步就剩删除操作了。

//删除操作
        $(".btn_remove").each(function () {
            $(this).click(function () {
                //这里在删除之后索引直接错位
                $(this).parents(".cartpar").remove();
                addallprice();//删除之后重新累计
            });
        });

如图：
在这里插入图片描述删掉了序号二的商品。
还有在数量框自定义输入数量的功能。

//用户的文本框输入功能
        $(".number").keydown(function (e) {
            //不能出现除数字以外的字母
            //不处理汉字
            if (e.key == "Backspace") {
                //检测值
                if ($(this).val().length == 1) {
                    $(this).val(1);
                    return false;
                }
            }
            if (isNaN(e.key) && e.key != "Backspace") {
                return false;
            }
        });

效果：
在这里插入图片描述到这里购物车就基本完成了。

总结： 在这个购物车的实践中，我深深的感觉到了jQuery的魅力。它可以很方便的实现一些功能，相比js更加的简洁和方便。主要运用的还是对jQuery对dom元素的获取修改样式赋予功能等等，需要多练才能自由运用，这样编程效率将会大大提升。

Always_Love
发布了29 篇原创文章 · 获赞 1 · 访问量 570
私信 关注

猜你喜欢

转载自blog.csdn.net/Always_Love/article/details/104358116
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
OOP第二次作业
java web 乱码问题
android 禁止scrollview 因控件变化自动滚动到底的方法
mysql服务解压版的安装(5.7)
centos7 nginx+tomcat配置https 安装免费SSL Let’s Encrypt
使用Mosquitto遗嘱机制实现感知客户端上下线功能的方法
面向对象之------多态与多态性
开发Teams Tabs应用程序
C# 希尔排序
第2章 Jupyter Notebooks
每日归档
更多
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022