初学者用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或false
var checked=$tr.children(".cart_td_1").children().is(":checked");
if(checked){
//prev遍历的方式用于搜索自己本身同辈元素的上一个
$tr.prev().remove();
$tr.remove();
}
});
//点击删除所选,依然调用计算总价的函数
productCount();
});

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

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

那我们下次再见把!

最新文章

  1. Eclipse+Maven创建webapp项目&lt;一&gt;
  2. 如何在R中加载&rdquo;xlsx&rdquo;包
  3. 7.django之自定义分页记录
  4. 各种编码问题产生原因以及解决办法---------响应编码,请求编码,URL编码
  5. (笔记)angular 包含关系的controller参数传递
  6. CSS设置行内元素和块级元素的水平居中、垂直居中
  7. hashCode() 和equals() 区别和作用
  8. 【转】Ubuntu 修改hosts
  9. No redirect found in host configuration file (C:\WINDOWS\Microsoft.NET\Framework\v1.1.4322\aspnet.config).
  10. 用NPOI导出Excel,生成下拉列表、以及下拉联动列表(第1篇/共3篇)
  11. Vmware的虚拟机示例进入BIOS方法
  12. MySQL数据库基本用法-查询
  13. 升级SilverLight为5.1.50907.0后,VS调试时报“无法启动调试--未安装 Silverlight Developer 运行时。请安装一个匹配版本”的处理办法
  14. ROS进阶学习手记 7 -- RViz仿真实例1
  15. c++11 基于范围的for循环
  16. react 组件积累
  17. HDU 4300 Clairewd’s message (next函数的应用)
  18. Unity-EasyTouch插件之Two Finger
  19. shell中的$()、${}、$(())、(())
  20. java代码GUI简单的。。。

热门文章

  1. 使用selenium实现模拟淘宝登陆
  2. 最快的 Python Web 框架入门
  3. 【LeetCode】2、Add Two Numbers
  4. 原始js表单文本框初始化获取焦点和选中
  5. Ubuntu 16.04 安装R和RStudio
  6. ubuntu系统中java开发环境的搭建
  7. Django REST framework - 认证
  8. 【Codeforces 474D】Flowers
  9. 【codeforces 509B】Painting Pebbles
  10. 【codeforces 755E】PolandBall and White-Red graph