热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jQuery模拟淘宝购物车功能

本文主要介绍了用jQuery模拟淘宝购物车功能的实例,具有很好的参考价值,下面跟着小编一起来看下吧

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

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

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


推荐阅读
  • 利用Cookie实现用户登录状态的持久化
    本文探讨了如何使用Cookie技术在Web应用中实现用户登录状态的持久化,包括Cookie的基本概念、优势及主要操作方法,并通过一个简单的Java Web项目示例展示了具体实现过程。 ... [详细]
  • 本文详细介绍了JavaScript中数组的转换方法、栈方法、队列方法、重排序方法及操作方法,包括toLocaleString()、toString()、valueOf()等基本转换方法,以及push()、pop()、shift()、unshift()等用于模拟栈和队列行为的方法。 ... [详细]
  • 探索OpenWrt中的LuCI框架
    本文深入探讨了OpenWrt系统中轻量级HTTP服务器uhttpd的工作原理及其配置,重点介绍了LuCI界面的实现机制。 ... [详细]
  • LoadRunner中的IP欺骗配置与实践
    为了确保服务器能够有效地区分不同的用户请求,避免多人使用同一IP地址造成的访问限制,可以通过配置IP欺骗来解决这一问题。本文将详细介绍IP欺骗的工作原理及其在LoadRunner中的具体配置步骤。 ... [详细]
  • 本文详细介绍了如何使用Rufus工具制作一个兼容UEFI启动模式的Windows Server 2008 R2安装U盘,包括必要的软件和步骤。 ... [详细]
  • 本文介绍如何使用 Python 计算两个时间戳之间的时间差,并将其转换为毫秒。示例代码展示了如何通过 `time` 和 `datetime` 模块实现这一功能。 ... [详细]
  • 使用 ModelAttribute 实现页面数据自动填充
    本文介绍了如何利用 Spring MVC 中的 ModelAttribute 注解,在页面跳转后自动填充表单数据。主要探讨了两种实现方法及其背后的原理。 ... [详细]
  • 使用REM和媒体查询实现响应式布局
    本文介绍如何利用REM单位和媒体查询(Media Queries)来创建适应不同屏幕尺寸的网页布局。通过具体示例,展示在不同屏幕宽度下如何调整页面元素的样式。 ... [详细]
  • SPFA算法详解与应用
    当图中包含负权边时,传统的最短路径算法如Dijkstra不再适用,而Bellman-Ford算法虽然能解决问题,但其时间复杂度过高。SPFA算法作为一种改进的Bellman-Ford算法,能够在多数情况下提供更高效的解决方案。本文将详细介绍SPFA算法的原理、实现步骤及其应用场景。 ... [详细]
  • 本文详细对比了HashMap和HashTable在多线程环境下的安全性、对null值的支持、性能表现以及方法同步等方面的特点,帮助开发者根据具体需求选择合适的数据结构。 ... [详细]
  • 我在尝试将组合框转换为具有自动完成功能时遇到了一个问题,即页面上的列表框也被转换成了自动完成下拉框,而不是保持原有的多选列表框形式。 ... [详细]
  • 神策数据分析基础
    本文介绍了基于用户行为的数据分析方法,包括业务问题的提出与定义、具体行为的识别及统计分析流程。同时,详细阐述了如何利用事件模型(Event Model)来描述用户行为,以及在实际应用中的案例分析。 ... [详细]
  • Docker基础入门与环境配置指南
    本文介绍了Docker——一款用Go语言编写的开源应用程序容器引擎。通过Docker,用户能够将应用及其依赖打包进容器内,实现高效、轻量级的虚拟化。容器之间采用沙箱机制,确保彼此隔离且资源消耗低。 ... [详细]
  • 本文列举了构建和运行 Struts2 应用程序所需的核心 JAR 文件,包括文件上传、日志记录、模板引擎等关键组件。 ... [详细]
  • selenium通过JS语法操作页面元素
    做过web测试的小伙伴们都知道,web元素现在很多是JS写的,那么既然是JS写的,可以通过JS语言去操作页面,来帮助我们操作一些selenium不能覆盖的功能。问题来了我们能否通过 ... [详细]
author-avatar
娶位红太郎_442
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有