https://www.cnblogs.com/sandraryan/

jq实现购物车功能

点击+- 增减数量，计算价格；

点击删除，删除当前行（商品）

点击- ，减到0 询问是否删除商品

点击全选 计算总价（商品只有被选中才能计算总价）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div,

        ul,

        li {

            margin: 0;

            padding: 0;

        }

        #wrap {

            width: 782px;

            box-shadow: 0 0 10px lightblue;

            margin: 100px auto;

            text-align: center;

        }

        li {

            font-size: 20px;

            color: gray;

            width: 100px;

            height: 24px;

            line-height: 30px;

            list-style: none;

            border: 1px solid lightgray;

            float: left;

            padding: 10px;

        }

        ul {

            height: 46px;

            display: block;

            margin: 0 auto;

            clear: both;

            background-color: rgb(212, 241, 250);

        }

        .num {

            width: 150px;

        }

        .num input {

            width: 30px;

            text-align: center;

        }

        .total {

            clear: both;

            text-align: right;

            padding: 10px;

            font-size: 20px;

            color: red;

        }

        ul span {

            border: 1px solid lightgray;

            padding: 2px 10px;

            border-radius: 5px;

            /* background-color: lightgray; */

            color: gray;

        }

    </style>

</head>

<body>

    <div id="wrap">

        <ul>

            <li><input name='all' type='checkbox'>all</li>

            <li>name</li>

            <li>price</li>

            <li class="num">number</li>

            <li>add</li>

            <li>operation</li>

        </ul>

        <ul>

            <li><input type="checkbox" name='one'>one</li>

            <li>phone</li>

            <li>1000.00</li>

            <li class='num'>

                <input type="button" value='-'>

                <input type="text" name='num' value="1">

                <input type="button" value='+'>

            </li>

            <li class="price">1000.00</li>

            <li><span>delete</span></li>

        </ul>

        <ul>

            <li><input type="checkbox" name='one'>one</li>

            <li>phone</li>

            <li>1000.00</li>

            <li class='num'>

                <input type="button" value='-'>

                <input type="text" name='num' value="1">

                <input type="button" value='+'>

            </li>

            <li class="price">1000.00</li>

            <li><span>delete</span></li>

        </ul>

        <ul>

            <li><input type="checkbox" name='one'>one</li>

            <li>phone</li>

            <li>1000.00</li>

            <li class='num'>

                <input type="button" value='-'>

                <input type="text" name='num' value="1">

                <input type="button" value='+'>

            </li>

            <li class="price">1000.00</li>

            <li><span>delete</span></li>

        </ul>

        <div class="total">total: <span> 0.00 </span></div>

    </div>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

    <script>

        // 计算总价的函数

        function calcTotal() {

            // 设置总价初始值

            var total = 0;

            // 获取所有name为one的input框

            var allOne = $('input[name = "one"]');

            // 获取单价

            var price = $('.price');

            // name为one的input框，如果被选中了，计算总价

            allOne.each(function () {

                if ($(this).prop('checked')) {

                    // 获取当前索引

                    var i = allOne.index($(this));

                    // eq()返回带有被选元素的索引

                    total += parseFloat(price.eq(i).text());

                }

            });

            // 总价的值写在页面上

            $('.total span').text(total);

        }

        $(function () {

            // 获取ul里面的span（删除键），注册点击事件

            $('ul span').click(function () {

                // 弹出输入框，如果用户点击了确认，返回true

                if (confirm('you delete your mother ne????')) {

                    // 删除当前删除键坐在的ul行

                    $(this).parent().parent().closest('ul').remove();

                    // 否则。（用户点击取消）什么都不做

                } else {}

                // 如果被选中了，改变总价，调用计算总价的函数

                // 计算总价

                calcTotal();

            });

            // 找到input 的name是num的元素，当内容改变时

            $('input[name = "num"]').change(function () {

                // 获取值并转换为浮点数（数量）

                var val = parseFloat($(this).val());

                // 如果值大于0，其父级的下一个兄弟的文本变成：当前值*当前值的父级的上一个元素值的浮点数

                // 即 数量 * 单价

                if (val > 0) {

                    // 吧单价的值获取并转为浮点型 * 单价（当前元素的父级的下一个元素）

                    $(this).parent().next().text(val * parseFloat($(this).parent().prev().text()));

                    // 如果当前值为0 ，删除按钮trigger 触发click事件

                } else if (val == 0) {

                    // 由于input[val = '-']获取的是集合，三个全都删掉了。在这里添加判断，如果值为0，当前行执行delete点击事件函数

                    if (confirm('you delete your mother ne????')) {

                        $(this).parent().parent().closest('ul').remove();

                    } else {}

                    calcTotal();

                    // $(this).parent().parent().remove();  //直接删除

                } else {

                    //默认1

                    $(this).val(1);

                }

                calcTotal();

            });

            // - 按钮

            // 获取减号，注册点击事件

            $('input[value = "-"]').click(function () {

                // - 的下一个的值（数字）-1 转为整形，设为-下一个元素（数字）的值

                //就是点击- 吧数字的值--

                $(this).next().val(parseInt($(this).next().val()) - 1);

                // 数字值trigger change事件

                $('input[name = "num"]').trigger('change');

            });

            // + 同理

            $('input[value = "+"]').click(function () {

                $(this).prev().val(parseInt($(this).prev().val()) + 1);

                $('input[name = "num"]').trigger('change');

            });

            // 选择框 选中一个框就执行一次计算价格的函数

            $('input[name = "one"]').click(function () {

                calcTotal();

            });

            // 当选中全选框时候，操作全选或者反选

            $('input[name = "all"]').click(function () {

                // prop方法设置或返回备选元素的属性和值

                // 当前元素（顶部复选框）被选中时（checked时）

                var ret = $(this).prop('checked');

                console.log(ret);

                // 每一个单选框都添加checked属性

                $('input[name="one"]').each(function () {

                    $(this).prop('checked', ret);

                });

                calcTotal();

            });

        });

    </script>

</body>

</html>

布局就这样了~~~

jq实现简单购物车增删功能的更多相关文章

  1. python实现简单的循环购物车小功能

    python实现简单的循环购物车小功能 # -*- coding: utf-8 -*- __author__ = 'hujianli' shopping = [ ("iphone6s&quo ...

  2. php 实现简单购物车

    今天在练习购物车以及提交订单,写的有点头晕,顺便也整理一下,这个购物车相对来说比较简单,用于短暂存储,并没有存储到数据库, 购物车对于爱网购的人来说简直是熟悉的不能再熟悉了,在写购物车之前,我们首先要 ...

  3. Django文件上传三种方式以及简单预览功能

    主要内容: 一.文件长传的三种方式 二.简单预览功能实现 一.form表单上传 1.页面代码 <!DOCTYPE html> <html lang="en"> ...

  4. Session小案例-----简单购物车的使用

    Session小案例-----简单购物车的使用 同上篇一样,这里的处理请求和页面显示相同用的都是servlet. 功能实现例如以下: 1,显示站点的全部商品 2.用户点击购买后,可以记住用户选择的商品 ...

  5. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  6. ASP.NET MVC 学习4、Controller中添加SearchIndex页面，实现简单的查询功能

    参考:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/examining-the-edit-method ...

  7. Web---创建Servlet的3种方式、简单的用户注册功能

    说明: 创建Servlet的方式,在上篇博客中,已经用了方式1(实现Servlet接口),接下来本节讲的是另外2种方式. 上篇博客地址:http://blog.csdn.net/qq_26525215 ...

  8. js+html+css简单的互动功能页面（2015知道几乎尖笔试题）http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2

    js+html+css实现简单页面交互功能(2015知乎前端笔试题) http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html? from=y1.7-1. ...

  9. Spring 学习——基于Spring WebSocket 和STOMP实现简单的聊天功能

    本篇主要讲解如何使用Spring websocket 和STOMP搭建一个简单的聊天功能项目,里面使用到的技术,如websocket和STOMP等会简单介绍,不会太深,如果对相关介绍不是很了解的,请自 ...

随机推荐

  1. 五.反馈(Hopfield)神经网络

    前馈网络一般指前馈神经网络或前馈型神经网络.它是一种最简单的神经网络,各神经元分层排列.每个神经元只与前一层的神经元相连.接收前一层的输出,并输出给下一层,数据正想流动,输出仅由当前的输入和网络权值决 ...

  2. hdfs 的存储空间扩展

    问题:之前集群上每个节点的的大小为50G, 但是硬盘容量是160G的, 不明白为什么才50个G: 后来发现是因为dfs.data.dir设置的问题,该目录下挂载的磁盘空间的大小就会作为该节点的容量.. ...

  3. 软工作业——Alpha版本第一周小结

    姓名 学号 周前计划安排 每周实际工作记录 自我打分 zxl 061425 1.进行任务分析2.进行任务分配 1.对任务进行了初步的划分,但还为进行给模块间的联系2.给每人分配了任务3.负责扫码签到功 ...

  4. python输出最大公约数和最小公倍数

    def myfun(): num1 = int(input('输入num1')) num2 = int(input('输入num2')) list1=[] for i in range(1, max( ...

  5. MySQL数据库操作语句(补充1)（cmd环境运行）

    一.字符串类型 enum枚举类型 /* 也叫做枚举类型,类似于单选! 如果某个字段的值只能从某几个确定的值中进行选择,一般就使用enum类型, 在定义的时候需要将该字段所有可能的选项都罗列出来: */ ...

  6. 【To Read】

    Maximal Rectangle Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle conta ...

  7. 【JZOJ4786】【NOIP2016提高A组模拟9.17】小a的强迫症

    题目描述 输入 输出 样例输入 3 2 2 1 样例输出 3 数据范围 样例解释 解法 先假定每种颜色的珠子取一个按顺序排列. 设这n个珠子就是每一种颜色的珠子的最后一个. 考虑逐个把珠子放入. 对于 ...

  8. MUI - myStorage在ios safari无痕浏览模式下的解决方案

    myStorage在ios safari无痕浏览模式下的解决方案 今天看到了这个帖子LocalStorage 在 Private Browsing 下的一个限制, 吓尿了,如果用户开启了无痕浏览,ap ...

  9. Java中try catch finally语句中含return语句的执行情况总结-编程陷阱

    前言:有java编程基础的人对java的异常处理机制都会有一定了解,而且可能感觉使用起来也比较简单,但如果在try catch finally语句块中遇到return语句,开发者可能就会遇到一些逻辑问 ...

  10. oracle表内连接和外连接

    n  概述 表连接分为内连接和外连接 n  内连接 内连接实际上就是利用where子句对两张表形成的笛卡尔集进行筛选,我们前面学习的查询都是内连接,也是在开发过程中用的最多的连接查询. 基本语法: s ...