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 相关文章推荐
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
JS window.opener返回父页面的应用
Oct 24 Javascript
js原型链原理看图说明
Jul 07 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
使用jquery制作弹出框效果
Apr 03 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
Node使用Sequlize连接Mysql报错:Access denied for user ‘xxx’@‘localhost’
Jan 03 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
JavaScript简单编程实例学习
Feb 14 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
PHP测试程序运行时间的类
2012/02/05 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
express启用https使用小记
2019/05/21 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
php使用递归与迭代实现快速排序示例
2014/01/23 Python
35个Python编程小技巧
2014/04/01 Python
Python切片用法实例教程
2014/09/08 Python
python实现数据预处理之填充缺失值的示例
2017/12/22 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
使用python进行广告点击率的预测的实现
2019/07/04 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
新学期班主任寄语
2014/01/18 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
美容院店长岗位职责
2014/04/08 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
PYTHON使用Matplotlib去实现各种条形图的绘制
2022/03/22 Python
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android
如何利用python实现列表嵌套字典取值
2022/06/10 Python
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python