一聚教程网:一个值得你收藏的教程网站

热门教程

jQuery模拟淘宝购物车功能

时间:2022-06-25 17:09:27 编辑:袖梨 来源:一聚教程网

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

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

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

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

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

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

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

 

 代码如下复制代码

$(function() {

  subtotal();

  addorminus();

  allcheckbox();

  delet();

  deleselect();

 });

 //设置 获取积分和一共金额函数

 functioncountmoney() {

  varmoney = 0;//总金额

  varjifen = 0;//总积分

  $(".cart_td_7").each(function() {

  varm = $(this).text();

  money += Number(m);

  varj = $(this).siblings(".cart_td_4").text();

  varnumber = $(this).siblings(".cart_td_6").children("input").val();

  jifen += Number(j * number);

  });

  $("#total").html(money);

  $("#integral").html(jifen);

 }

 //小计

 functionsubtotal() {

  varobj = $(".cart_td_7");

  obj.each(function() {      //each遍历每一个clss为.card_td_7的元素

  varnum = $(this).siblings(".cart_td_6").children("input").val();//购物车 选中的当前数量

  varprice = $(this).siblings(".cart_td_5").html();  //当前选中物品的price

  varmoney = num * price;     //小计

  $(this).html(money);

  });

  countmoney();

 }

 //添加或减少数量

 functionaddorminus() {

  $(".hand").on("click",function() {

  varnum;

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

  });

 }

 //全选或者全不选

 functionallcheckbox() {

  $("#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() {

  varbool =true;

  $("[name=cartCheckBox]").each(function() {

   if($(this).attr("cheked") !="checked") {

   bool =false;

   }

  });

  if(bool) {

   $("#allCheckBox").attr("checked","checked");

  }else{

   $("#allCheckBox").attr("checked",false);

  }

  });

 }

 //删除

 functiondelet() {

  $(".cart_td_8>a").live("click",function() {

  $(this).parent().parent().prev().remove();

  $(this).parent().parent().remove();

  subtotal();

  });

 }

 //删除所选

 functiondeleselect() {

  $("#deleteAll>img").live("click",function() {

  $("[name=cartCheckBox]").each(function() {

   if($(this).attr("checked") =="checked") {

   $(this). parent().parent().prev().remove();

   $(this).parent().parent().remove();

   }

  });

  subtotal();

  });

 }

 

热门栏目