初学jQuery之jQuery虚假购物车-------与真实数据无关
初学者用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虚假购物车-------与真实数据无关相关推荐
- 使用jQuery插件realshadow实现超酷真实阴影效果
为什么80%的码农都做不了架构师?>>> 日期:2012-5-4 来源:GBin1.com 在线演示 本地下载 大家有没有尝试使用纯CSS和Javascript来生成带有颜 ...
- 使用jQuery实现简单的购物车功能
使用jQuery实现简单的购物车功能 <!DOCTYPE html> <html><head><title>购物车</title><m ...
- jQuery:ajax调用成功后返回数据
本文翻译自:jQuery: Return data after ajax call success [duplicate] This question already has answers here ...
- 【jquery】jquery $.fn $.fx是什么意思
jquery $.fn $.fx是什么意思 $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc() 那么你可以这样子:$(&quo ...
- jQuery校验 jQuery Validate 表单验证详解
官网地址: http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库 <script src="../j ...
- 06-老马jQuery教程-jQuery高级
1.jQuery原型对象解密 jQuery里面的大部分API都是在jQuery的原型对象上定义的.jQuery源码中对原型对象做了简写的处理.也就是说:jQuery.fn === jQuery.pro ...
- 认识jQuery及jQuery选择器
记录自己平时要注意的,如您看到哪里错误,望指正 认识jQuery jQuery对象和DOM对象 var domObj = document.getElementById("id") ...
- 从零开始学习jQuery (九) jQuery工具函数
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
- 从零开始学习jQuery (七) jQuery动画-让页面动起来!
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
最新文章
- Python的while循环
- 打开快手,体验流畅的单目三维手势技术
- c语言得到txt文件的长度,我利用C语言实现SHA-256算法,需要从一个txt文件中读出数据并把...
- IDEA 启动时,报“淇℃伅”的字符
- 固态硬盘是什么接口_什么是SSD固态硬盘,跟机械硬盘有什么不同?
- 我所理解的JVM(三):字节码的执行
- 打印机显示脱机使用打印机不能打印
- 火山引擎虚拟数字人技术与应用
- IP范围表示法(网络子网划分)
- 马来酰亚胺和琥珀酰亚胺交联剂Sulfo-SMCC,CAS:92921-24-9的溶解性介绍
- 【MML】华为MML AAA接口联调,Java版本
- 【微信小程序】创建项目
- 线性回归分析——高尔顿数据集更正版
- 7-4 莫尔斯码(Morse Code) (25 分)
- shell脚本实例-交叉证认
- 新的 ES2022 规范终于发布了,我总结了8个实用的新功能
- 流/批/OLAP一体的Flink引擎
- 技嘉z97 服务器系统,BIOS界面再升级:Startup导航简单好用_技嘉 G1.Sniper Z97_主板评测-中关村在线...
- gtp文件服务器,GTP文件扩展名 - 什么是.gtp以及如何打开? - ReviverSoft
- Apriori算法(矩阵)