zoukankan      html  css  js  c++  java
  • 用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         }
  • 相关阅读:
    【一句日历】2020年3月
    写给我们项目总监的一些话
    基于ajax 的 几个例子 session ,ajax 实现登录,验证码 ,实现ajax表单展示
    day 51 随机验证码, 验证登陆 ,以及 装饰器在函数中的应用
    day 51 cooike 与 session
    day 50 AJAX 初入门
    day 38 jq 入门 学习(一)
    转的大佬的 学习方法
    day 49 数据分析, 数据聚合 F 查询 Q 查询
    day 48 ORM 进阶 多表连接 创建 以及 html模板继承
  • 原文地址:https://www.cnblogs.com/hfddz/p/6473531.html
Copyright © 2011-2022 走看看