jQuery模拟淘宝购物车功能

发布时间 - 2026-01-10 23:18:21    点击率:

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

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();
  });
 }

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


# jquery淘宝购物车  # jquery仿淘宝购物车  # jquery  # 购物车  # jQuery和CSS仿京东仿淘宝列表导航菜单  # jquery实现商品sku多属性选择功能(商品详情页)  # jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法  # jquery实现淘宝详情页选择套餐  # 复选框  # 小计  # 单击  # 全选  # 所选  # 遍历  # 能让  # 几点  # 该商品  # 总金额  # 不选  # 就开始  # var  # delet  # deleselect  # countmoney  # money  # jifen  # text 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: html5的keygen标签为什么废弃_替代方案说明【解答】  中国移动官方网站首页入口 中国移动官网网页登录  Laravel 419 page expired怎么解决_Laravel CSRF令牌过期处理  PythonWeb开发入门教程_Flask快速构建Web应用  Laravel怎么防止CSRF攻击_Laravel CSRF保护中间件原理与实践  网站制作大概要多少钱一个,做一个平台网站大概多少钱?  Laravel Session怎么存储_Laravel Session驱动配置详解  IOS倒计时设置UIButton标题title的抖动问题  Laravel的.env文件有什么用_Laravel环境变量配置与管理详解  Python文本处理实践_日志清洗解析【指导】  免费网站制作appp,免费制作app哪个平台好?  Laravel如何使用Scope本地作用域_Laravel模型常用查询逻辑封装技巧【手册】  制作ppt免费网站有哪些,有哪些比较好的ppt模板下载网站?  JS经典正则表达式笔试题汇总  网站制作怎么样才能赚钱,用自己的电脑做服务器架设网站有什么利弊,能赚钱吗?  网站制作软件有哪些,制图软件有哪些?  Python面向对象测试方法_mock解析【教程】  个人网站制作流程图片大全,个人网站如何注销?  MySQL查询结果复制到新表的方法(更新、插入)  Laravel如何使用Service Container和依赖注入?(代码示例)  Laravel项目结构怎么组织_大型Laravel应用的最佳目录结构实践  如何获取上海专业网站定制建站电话?  昵图网官方站入口 昵图网素材图库官网入口  Win11怎么恢复误删照片_Win11数据恢复工具使用【推荐】  Laravel如何升级到最新版本?(升级指南和步骤)  html5如何设置样式_HTML5样式设置方法与CSS应用技巧【教程】  网站图片在线制作软件,怎么在图片上做链接?  HTML5空格和margin有啥区别_空格与外边距的使用场景【说明】  Laravel怎么实现前端Toast弹窗提示_Laravel Session闪存数据Flash传递给前端【方法】  Laravel如何自定义分页视图?(Pagination示例)  微博html5版本怎么弄发语音微博_语音录制入口及时长限制操作【教程】  VIVO手机上del键无效OnKeyListener不响应的原因及解决方法  文字头像制作网站推荐软件,醒图能自动配文字吗?  百度输入法ai面板怎么关 百度输入法ai面板隐藏技巧  JS去除重复并统计数量的实现方法  如何自定义建站之星网站的导航菜单样式?  如何自定义建站之星模板颜色并下载新样式?  Gemini怎么用新功能实时问答_Gemini实时问答使用【步骤】  佐糖AI抠图怎样调整抠图精度_佐糖AI精度调整与放大细化操作【攻略】  php485函数参数是什么意思_php485各参数详细说明【介绍】  EditPlus中的正则表达式 实战(4)  Android中AutoCompleteTextView自动提示  laravel怎么为应用开启和关闭维护模式_laravel应用维护模式开启与关闭方法  Laravel怎么创建自己的包(Package)_Laravel扩展包开发入门到发布  Laravel N+1查询问题如何解决_Eloquent预加载(Eager Loading)优化数据库查询  如何在万网自助建站中设置域名及备案?  5种Android数据存储方式汇总  Python企业级消息系统教程_KafkaRabbitMQ高并发应用  EditPlus中的正则表达式 实战(1)  Laravel模型关联查询教程_Laravel Eloquent一对多关联写法