jQuery模拟淘宝购物车功能

时间: 作者:北命

  

[jquery淘宝购物车汇盛国际平台,jquery仿淘宝购物车,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();  });  }  
  
  

  

(责任编辑:admin)

推荐图片Related

相关文章Related

查看更多热门新闻


首页 | 特效插件 | 常用代码 | 样式素材 | 脚本代码 | css特效

Copyright © 2017-2018 汇盛国际 版权所有

系统要求:本站自适应各终端浏览器分辨率

请使用Google、Firefox、IE9、百度浏览器登录网站

网站地图 | RSS订阅 | 汇盛国际平台