初学者用jquery来写仿真的购物车,确实有点恶心,那我们今天就把这万恶的购物车剖析一下,来看看到底有什么难的.

购物车的效果图

那我们先从复选框开始吧,废话不多说,上代码!!

带有序号的,都是一些分析!

1.全选或全不选效果

//点击复选框全选或全不选效果$("#allCheckBox").click(function(){var checked=$(this).is(":checked");   //检查这个集合里有没有匹配的元素   返回true,false$(".cart_td_1").children().attr("checked",checked);     //把上面的变量放在这边来用
    });//判断是否全选function ifAllChecked(){var checkedBoxs=$(".cart_td_1").children();   //获取到集合var sum=checkedBoxs.size();     //size() 与length() 返回的值是一样的var k=0;    //迭代变量//each是循环checkedBoxs.each(function(index,dom){   //index当前对象的索引,或者是所有的对象的索引      dom当前对象,或者是对象if($(dom).is(":checked")) k++;    //匹配页面上处于选中状态的元素
        });if(k==sum){   //当我们拿出了input复选框的个数$("#allCheckBox").attr("checked",true);   //如果为true的话,就改变值}else{$("#allCheckBox").attr("checked",false);   //否则的话,我们也改变值
        }}ifAllChecked();//页面加载完后运行//单选判断$(".cart_td_1").children().click(function(){ifAllChecked();     });

当我们解决了复选框的问题后,剩下的就是计算总价与小计的问题了,其实咋们仔细想想的话,压根就不难,难的是这些值它们全在html页面上,我们该怎么把他们拿下来,为我们所用哪?!!!!

2.进行计算函数

//计算总价与小计function productCount(){var $tr=$("#shopping").find("tr[id]");//总价与积分的初始值var summer=0;var integral=0;$tr.each(function(i,dom){//我们开始把页面上的值全部拿下来var num=$(dom).children(".cart_td_6").find("input").val();//商品数量var price=num*$(dom).children(".cart_td_5").text();//商品小计
            $(dom).children(".cart_td_7").html(price);//显示商品小计summer+=price;//总价  已经开始在累加integral+=$(dom).children(".cart_td_4").text()*num;//积分
        });$("#total").text(summer);   //总价$("#integral").text(integral);   //积分
    }productCount();//页面加载完后运行

3.点击减号或加号得行为

//商品增加减少,flag为true时增加,flag为false时减少function changeNumber(dom,flag){var $input = $(dom).parent().find("input");var value = $input.val();if(flag){value++;    }else{value--;if(value<=0){   //最起码件数不能低于0件,value=1;    //当我们已经规定了不能低于0件的时候,我们到底还是把件数减了,所以我们还是的把件数调整回来alert("宝贝数量必须大于0");  }}$input.val(value);productCount();};

因为加号和减号是图片,所以我们得把函数绑定到图片上

4.把点击加减函数绑定到图片上

 //点击减少     当我们点击图片的时候,顺便调用一下方法$(".cart_td_6").find("img[alt='minus']").click(function(){changeNumber(this,false);});//点击增加$(".cart_td_6").find("img[alt='add']").click(function(){changeNumber(this,true);});

当然我们还有删除某一列商品,所以我使用了节点操作

5.节点操作

   //点击删除   节点操作$(".cart_td_8").find("a").click(function(){$(this).parent().parent().prev().remove();//删除前一tr$(this).parent().parent().remove();//删除当前tr
        productCount();});

还有删除所选,所以我们自己还得自定义一个函数

6.删除所选

 //点击删除所选$("#deleteAll").click(function(){$("#shopping").find("tr[id]").each(function(i,e){var $tr=$(e);//返回的值是true或falsevar checked=$tr.children(".cart_td_1").children().is(":checked");if(checked){//prev遍历的方式用于搜索自己本身同辈元素的上一个
                $tr.prev().remove();$tr.remove();}});//点击删除所选,依然调用计算总价的函数
        productCount();});

所以经过我们层层的解析,其实压根也不难,对吧!!!

我们这个虚假的购物车,才算完成!!!

那我们下次再见把!

转载于:https://www.cnblogs.com/bdqnquliang/p/6495868.html

初学jQuery之jQuery虚假购物车-------与真实数据无关相关推荐

  1. 使用jQuery插件realshadow实现超酷真实阴影效果

    为什么80%的码农都做不了架构师?>>>    日期:2012-5-4  来源:GBin1.com 在线演示  本地下载 大家有没有尝试使用纯CSS和Javascript来生成带有颜 ...

  2. 使用jQuery实现简单的购物车功能

    使用jQuery实现简单的购物车功能 <!DOCTYPE html> <html><head><title>购物车</title><m ...

  3. jQuery:ajax调用成功后返回数据

    本文翻译自:jQuery: Return data after ajax call success [duplicate] This question already has answers here ...

  4. 【jquery】jquery $.fn $.fx是什么意思

    jquery $.fn $.fx是什么意思 $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效.  如扩展$.fn.abc()  那么你可以这样子:$(&quo ...

  5. jQuery校验 jQuery Validate 表单验证详解

    官网地址: http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库 <script src="../j ...

  6. 06-老马jQuery教程-jQuery高级

    1.jQuery原型对象解密 jQuery里面的大部分API都是在jQuery的原型对象上定义的.jQuery源码中对原型对象做了简写的处理.也就是说:jQuery.fn === jQuery.pro ...

  7. 认识jQuery及jQuery选择器

    记录自己平时要注意的,如您看到哪里错误,望指正 认识jQuery jQuery对象和DOM对象 var domObj = document.getElementById("id") ...

  8. 从零开始学习jQuery (九) jQuery工具函数

    本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...

  9. 从零开始学习jQuery (七) jQuery动画-让页面动起来!

    本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...

最新文章

  1. Python的while循环
  2. 打开快手,体验流畅的单目三维手势技术
  3. c语言得到txt文件的长度,我利用C语言实现SHA-256算法,需要从一个txt文件中读出数据并把...
  4. IDEA 启动时,报“淇℃伅”的字符
  5. 固态硬盘是什么接口_什么是SSD固态硬盘,跟机械硬盘有什么不同?
  6. 我所理解的JVM(三):字节码的执行
  7. 打印机显示脱机使用打印机不能打印
  8. 火山引擎虚拟数字人技术与应用
  9. IP范围表示法(网络子网划分)
  10. 马来酰亚胺和琥珀酰亚胺交联剂Sulfo-SMCC,CAS:92921-24-9的溶解性介绍
  11. 【MML】华为MML AAA接口联调,Java版本
  12. 【微信小程序】创建项目
  13. 线性回归分析——高尔顿数据集更正版
  14. 7-4 莫尔斯码(Morse Code) (25 分)
  15. shell脚本实例-交叉证认
  16. 新的 ES2022 规范终于发布了,我总结了8个实用的新功能
  17. 流/批/OLAP一体的Flink引擎
  18. 技嘉z97 服务器系统,BIOS界面再升级:Startup导航简单好用_技嘉 G1.Sniper Z97_主板评测-中关村在线...
  19. gtp文件服务器,GTP文件扩展名 - 什么是.gtp以及如何打开? - ReviverSoft
  20. Apriori算法(矩阵)

热门文章

  1. HTML5 表单 中
  2. 注册和登陆与数据库的链接
  3. 【安装PHP】如何在openSUSE42.1下编译安装PHP7
  4. 参数估计:最大似然、贝叶斯与最大后验
  5. Android OpenGL ES 离屏渲染(offscreen render)
  6. struts1 几种Action父类的比较
  7. haproxy keepalived_详解mycat+haproxy+keepalived搭建高可用负载均衡mysql集群
  8. poj1190深搜 生日蛋糕
  9. hdu3987 最小割边数
  10. hdu2435最大流最小割