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

jq实现购物车功能

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

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.         div,
  11.         ul,
  12.         li {
  13.             margin: 0;
  14.             padding: 0;
  15.         }
  16.  
  17.         #wrap {
  18.             width: 782px;
  19.             box-shadow: 0 0 10px lightblue;
  20.             margin: 100px auto;
  21.             text-align: center;
  22.         }
  23.  
  24.         li {
  25.             font-size: 20px;
  26.             color: gray;
  27.             width: 100px;
  28.             height: 24px;
  29.             line-height: 30px;
  30.             list-style: none;
  31.             border: 1px solid lightgray;
  32.             float: left;
  33.             padding: 10px;
  34.         }
  35.  
  36.         ul {
  37.             height: 46px;
  38.             display: block;
  39.             margin: 0 auto;
  40.             clear: both;
  41.             background-color: rgb(212, 241, 250);
  42.         }
  43.  
  44.         .num {
  45.             width: 150px;
  46.         }
  47.  
  48.         .num input {
  49.             width: 30px;
  50.             text-align: center;
  51.         }
  52.  
  53.         .total {
  54.             clear: both;
  55.             text-align: right;
  56.             padding: 10px;
  57.             font-size: 20px;
  58.             color: red;
  59.         }
  60.  
  61.         ul span {
  62.             border: 1px solid lightgray;
  63.             padding: 2px 10px;
  64.             border-radius: 5px;
  65.             /* background-color: lightgray; */
  66.             color: gray;
  67.         }
  68.     </style>
  69. </head>
  70.  
  71. <body>
  72.     <div id="wrap">
  73.         <ul>
  74.             <li><input name='all' type='checkbox'>all</li>
  75.             <li>name</li>
  76.             <li>price</li>
  77.             <li class="num">number</li>
  78.             <li>add</li>
  79.             <li>operation</li>
  80.         </ul>
  81.         <ul>
  82.             <li><input type="checkbox" name='one'>one</li>
  83.             <li>phone</li>
  84.             <li>1000.00</li>
  85.             <li class='num'>
  86.                 <input type="button" value='-'>
  87.                 <input type="text" name='num' value="1">
  88.                 <input type="button" value='+'>
  89.             </li>
  90.             <li class="price">1000.00</li>
  91.             <li><span>delete</span></li>
  92.         </ul>
  93.         <ul>
  94.             <li><input type="checkbox" name='one'>one</li>
  95.             <li>phone</li>
  96.             <li>1000.00</li>
  97.             <li class='num'>
  98.                 <input type="button" value='-'>
  99.                 <input type="text" name='num' value="1">
  100.                 <input type="button" value='+'>
  101.             </li>
  102.             <li class="price">1000.00</li>
  103.             <li><span>delete</span></li>
  104.         </ul>
  105.         <ul>
  106.             <li><input type="checkbox" name='one'>one</li>
  107.             <li>phone</li>
  108.             <li>1000.00</li>
  109.             <li class='num'>
  110.                 <input type="button" value='-'>
  111.                 <input type="text" name='num' value="1">
  112.                 <input type="button" value='+'>
  113.             </li>
  114.             <li class="price">1000.00</li>
  115.             <li><span>delete</span></li>
  116.         </ul>
  117.         <div class="total">total: <span> 0.00 </span></div>
  118.     </div>
  119.  
  120.     <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  121.     <script>
  122.         // 计算总价的函数
  123.         function calcTotal() {
  124.             // 设置总价初始值
  125.             var total = 0;
  126.             // 获取所有name为one的input框
  127.             var allOne = $('input[name = "one"]');
  128.             // 获取单价
  129.             var price = $('.price');
  130.             // name为one的input框，如果被选中了，计算总价
  131.             allOne.each(function () {
  132.                 if ($(this).prop('checked')) {
  133.                     // 获取当前索引
  134.                     var i = allOne.index($(this));
  135.                     // eq()返回带有被选元素的索引
  136.                     total += parseFloat(price.eq(i).text());
  137.                 }
  138.             });
  139.             // 总价的值写在页面上
  140.             $('.total span').text(total);
  141.         }
  142.  
  143.         $(function () {
  144.             // 获取ul里面的span（删除键），注册点击事件
  145.             $('ul span').click(function () {
  146.                 // 弹出输入框，如果用户点击了确认，返回true
  147.                 if (confirm('you delete your mother ne????')) {
  148.                     // 删除当前删除键坐在的ul行
  149.                     $(this).parent().parent().closest('ul').remove();
  150.                     // 否则。（用户点击取消）什么都不做
  151.                 } else {}
  152.                 // 如果被选中了，改变总价，调用计算总价的函数
  153.                 // 计算总价
  154.                 calcTotal();
  155.             });
  156.  
  157.             // 找到input 的name是num的元素，当内容改变时
  158.             $('input[name = "num"]').change(function () {
  159.                 // 获取值并转换为浮点数（数量）
  160.                 var val = parseFloat($(this).val());
  161.                 // 如果值大于0，其父级的下一个兄弟的文本变成：当前值*当前值的父级的上一个元素值的浮点数
  162.                 // 即 数量 * 单价
  163.                 if (val > 0) {
  164.                     // 吧单价的值获取并转为浮点型 * 单价（当前元素的父级的下一个元素）
  165.                     $(this).parent().next().text(val * parseFloat($(this).parent().prev().text()));
  166.                     // 如果当前值为0 ，删除按钮trigger 触发click事件
  167.                 } else if (val == 0) {
  168.                     // 由于input[val = '-']获取的是集合，三个全都删掉了。在这里添加判断，如果值为0，当前行执行delete点击事件函数
  169.                     if (confirm('you delete your mother ne????')) {
  170.                         $(this).parent().parent().closest('ul').remove();
  171.                     } else {}
  172.                     calcTotal();
  173.                     // $(this).parent().parent().remove();  //直接删除
  174.                 } else {
  175.                     //默认1
  176.                     $(this).val(1);
  177.                 }
  178.                 calcTotal();
  179.             });
  180.  
  181.             // - 按钮
  182.             // 获取减号，注册点击事件
  183.             $('input[value = "-"]').click(function () {
  184.                 // - 的下一个的值（数字）-1 转为整形，设为-下一个元素（数字）的值
  185.                 //就是点击- 吧数字的值--
  186.                 $(this).next().val(parseInt($(this).next().val()) - 1);
  187.                 // 数字值trigger change事件
  188.  
  189.                 $('input[name = "num"]').trigger('change');
  190.             });
  191.  
  192.             // + 同理
  193.             $('input[value = "+"]').click(function () {
  194.                 $(this).prev().val(parseInt($(this).prev().val()) + 1);
  195.                 $('input[name = "num"]').trigger('change');
  196.  
  197.             });
  198.             // 选择框 选中一个框就执行一次计算价格的函数
  199.             $('input[name = "one"]').click(function () {
  200.                 calcTotal();
  201.             });
  202.             // 当选中全选框时候，操作全选或者反选
  203.             $('input[name = "all"]').click(function () {
  204.                 // prop方法设置或返回备选元素的属性和值
  205.                 // 当前元素（顶部复选框）被选中时（checked时）
  206.                 var ret = $(this).prop('checked');
  207.                 console.log(ret);
  208.  
  209.                 // 每一个单选框都添加checked属性
  210.                 $('input[name="one"]').each(function () {
  211.                     $(this).prop('checked', ret);
  212.                 });
  213.                 calcTotal();
  214.             });
  215.  
  216.         });
  217.     </script>
  218. </body>
  219.  
  220. </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. oracle 控制结构

    1.if 逻辑结构 if/then 结构是最简单的条件测试,如果条件为真,则执行程序的一行或者多行,如果条件为假,则什么都不执行, 示例: if  1>2 then null; end if ; ...

  2. web前端学习（三）css学习笔记部分（8）-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

  3. 由一道面试题引起的arguments的思考

    写一个按照下面方式调用都能正常工作的 sum 方法 console.log(sum(2,3)); // Outputs 5 console.log(sum(2)(3)); // Outputs 5从这 ...

  4. Python3 中 configparser 模块用法

    configparser 简介 configparser 是 Pyhton 标准库中用来解析配置文件的模块,并且内置方法和字典非常接近.Python2.x 中名为 ConfigParser,3.x 已 ...

  5. HDU 3555 (递推&&记忆化)

    #include<stdio.h> #include<string.h> #define max 25 typedef __int64 LL; LL dp[max][]; // ...

  6. HTML 实体字符

    有些字符,像(<)这类的,对HTML来说是有特殊意义的,所以这些字符是不允许在文本中使用的.要在HTML中显示(<)这个字符,我们就必须使用实体字符. 实体字符 有一些字符对HTML来讲是 ...

  7. oracle 写存储过程有返回值时 注意在loop循环处添加返回值：=

    例子: create or replace procedure p_xl is v_count NUMBER(10); begin for rs in(select yhbh from dbyh) l ...

  8. XSD 命令及 WSDL 命令

    [XSD] 方法一:通过Xsd2Code工具生成相应代码(制作XSD工具有:Altova XMLSpy) 方法二:通过XSD命令生成相应代码 XML 架构定义 (Xsd.exe) 工具从 XDR.XM ...

  9. oracle终止数据库Abort

    中止数据库实例, 立即关闭 异常关闭是最主动的关闭类型,并且有如下这些特征: 从shutdown abort命令发布起,禁止建立任何新的oracle连接 当前正在运行的sql语句被终止,无论他们处于什 ...

  10. jenkins使用教程！

    http://jenkins-ci.org/ 首先去官方下载war包,直接安装jenkins的方式比较麻烦. 下载tomcat,jdk和ant cd /optwget http://mirrors.h ...