jQuery模拟淘宝购物车功能


Posted in Javascript onFebruary 27, 2017

首先我们要实现的内容的需求有如下几点:

1.在购物车页面中,当选中“全选”复选框时,所有商品前的复选框被选中,否则所有商品的复选框取消选中。

2.当所有商品前的复选框选中时,“全选”复选框被选中,否则“全选”复选框取消选中。

3.单击图标-的时候数量减一而且不能让物品小于0并且商品总价与积分随之改变。

4.单击图标+的时候数量增加并且商品总价与积分随之改变。

5.单击删除所选将删除用户选中商品,单击删除则删除该商品即可并达到商品总价与积分随之改变。

下面我们就开始进入代码:

$(function () {
  subtotal();
  addorminus();
  allcheckbox();
  delet();
  deleselect();
 });
 //设置 获取积分和一共金额函数
 function countmoney() {
  var money = 0; //总金额
  var jifen = 0; //总积分
  $(".cart_td_7").each(function () {
  var m = $(this).text();
  money += Number(m);
  var j = $(this).siblings(".cart_td_4").text();
  var number = $(this).siblings(".cart_td_6").children("input").val();
  jifen += Number(j * number);
  });
  $("#total").html(money);
  $("#integral").html(jifen);
 }
 //小计
 function subtotal() {
  var obj = $(".cart_td_7");
  obj.each(function () {       //each遍历每一个clss为.card_td_7的元素
  var num = $(this).siblings(".cart_td_6").children("input").val(); //购物车 选中的当前数量
  var price = $(this).siblings(".cart_td_5").html();   //当前选中物品的price
  var money = num * price;      //小计
  $(this).html(money);
  });
  countmoney();
 }
 //添加或减少数量
 function addorminus() {
  $(".hand").on("click", function () {
  var num;
  if ($(this).attr("alt") == "minus") {
   num = $(this).next().val();
   if (num == 1) {
   $(this).css("display", "none");
   } else {
   $(this).next().val(--num);
   }
  } else {
   num = $(this).prev().val();
   $(this).prev().val(++num);
   if (num == 1) {
   $(this).siblings("[alt==minus]").css("display", "visible");
   } else { } 
  }
  subtotal();
  });
 }
 //全选或者全不选
 function allcheckbox() {
  $("#allCheckBox").live("change", function () {
  if ($(this).attr("checked") == "checked") {
   $("[name=cartCheckBox]").attr("checked", "checked");
  } else {
   $("[name=cartCheckBox]").attr("checked", false);
  }
  });
  $("[name=cartCheckBox]").live("change", function () {
  var bool = true;
  $("[name=cartCheckBox]").each(function () {
   if ($(this).attr("cheked") != "checked") {
   bool = false;
   }
  });
  if (bool) {
   $("#allCheckBox").attr("checked", "checked");
  } else {
   $("#allCheckBox").attr("checked", false);
  }
  });
 }
 //删除
 function delet() {
  $(".cart_td_8>a").live("click", function () {
  $(this).parent().parent().prev().remove();
  $(this).parent().parent().remove();
  subtotal();
  });
 }
 //删除所选 
 function deleselect() {
  $("#deleteAll>img").live("click", function () {
  $("[name=cartCheckBox]").each(function () {
   if ($(this).attr("checked") == "checked") {
   $(this). parent().parent().prev().remove();
   $(this).parent().parent().remove();
   }
  });
  subtotal();
  });
 }

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
jscript之Read an Excel Spreadsheet
Jun 13 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
Aug 06 Javascript
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
理解AngularJs指令
Dec 10 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
Jun 22 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
vue视频播放插件vue-video-player的具体使用方法
Nov 08 Javascript
原生js实现轮播图
Feb 27 #Javascript
PHP实现本地图片上传和验证功能
Feb 27 #Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
Feb 27 #Javascript
提高Web性能的前端优化技巧总结
Feb 27 #Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 #Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 #Javascript
JavaScript中数组Array方法详解
Feb 27 #Javascript
You might like
ezSQL PHP数据库操作类库
2010/05/16 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
php共享内存段示例分享
2014/01/20 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
2016/08/24 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
three.js实现3D模型展示的示例代码
2017/12/31 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
2019/02/18 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
js实现简单放大镜效果
2020/03/07 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
Python玩转PDF的各种骚操作
2019/05/06 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
教师年终个人自我评价
2013/10/04 职场文书
迎接领导欢迎词
2014/01/11 职场文书
读书活动总结
2014/04/28 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers