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

以上是“jQuery如何模拟淘宝购物车功能”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联网站建设公司行业资讯频道！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。