用jQuery模拟淘宝购物车

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

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

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

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

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

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

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

  1  $(function () {
  2             
  3             subtotal();
  4             addorminus();
  5             allcheckbox();
  6             delet();
  7             deleselect();
  8         });
  9         //设置 获取积分和一共金额函数
 10         function countmoney() {
 11             var money = 0;   //总金额
 12             var jifen = 0;   //总积分
 13             $(".cart_td_7").each(function () {
 14                 var m = $(this).text();
 15                 money += Number(m);
 16                 var j = $(this).siblings(".cart_td_4").text();
 17                 var number = $(this).siblings(".cart_td_6").children("input").val();
 18                 jifen += Number(j * number);
 19             });
 20             $("#total").html(money);
 21             $("#integral").html(jifen);
 22         }
 23         //小计
 24         function subtotal() {
 25             var obj = $(".cart_td_7");
 26             obj.each(function () {                                                  //each遍历每一个clss为.card_td_7的元素
 27                 var num = $(this).siblings(".cart_td_6").children("input").val();   //购物车 选中的当前数量
 28                 var price = $(this).siblings(".cart_td_5").html();                  //当前选中物品的price
 29                 var money = num * price;                                            //小计
 30                 $(this).html(money);
 31             });
 32 
 33             countmoney();
 34 
 35         }
 36         //添加或减少数量
 37         function addorminus() {
 38             $(".hand").on("click", function () {
 39                 var num;
 40                 if ($(this).attr("alt") == "minus") {
 41                     num = $(this).next().val();
 42                     if (num == 1) {
 43                         $(this).css("display", "none");
 44                     } else {
 45                         $(this).next().val(--num);
 46                     }
 47                 } else {
 48                     num = $(this).prev().val();
 49                     $(this).prev().val(++num);
 50                     if (num == 1) {
 51                         $(this).siblings("[alt==minus]").css("display", "visible");
 52 
 53                     } else { }   
 54                 }
 55                 subtotal();
 56             });
 57         }
 58 
 59         //全选或者全不选
 60         function allcheckbox() {
 61             $("#allCheckBox").live("change", function () {
 62                 if ($(this).attr("checked") == "checked") {
 63                     $("[name=cartCheckBox]").attr("checked", "checked");
 64                 } else {
 65                     $("[name=cartCheckBox]").attr("checked", false);
 66                 }
 67 
 68             });
 69 
 70             $("[name=cartCheckBox]").live("change", function () {
 71                 var bool = true;
 72                 $("[name=cartCheckBox]").each(function () {
 73                     if ($(this).attr("cheked") != "checked") {
 74                         bool = false;
 75                     }
 76                 });
 77                 if (bool) {
 78                     $("#allCheckBox").attr("checked", "checked");
 79 
 80                 } else {
 81 
 82                     $("#allCheckBox").attr("checked", false);
 83                 }
 84             });
 85         }
 86         //删除
 87         function delet() {
 88             $(".cart_td_8>a").live("click", function () {
 89                 $(this).parent().parent().prev().remove();
 90                 $(this).parent().parent().remove();
 91                 subtotal();
 92             });
 93 
 94         }
 95         //删除所选 
 96         function deleselect() {
 97             $("#deleteAll>img").live("click", function () {
 98                 $("[name=cartCheckBox]").each(function () {
 99                     if ($(this).attr("checked") == "checked") {
100                         $(this). parent().parent().prev().remove();
101                         $(this).parent().parent().remove();
102                     }
103                 });
104                 subtotal();
105             });
106         }

 

posted @ 2017-02-27 13:32  会飞的豆子  阅读(1816)  评论(0编辑  收藏  举报