jquery.cookie实现的客户端购物车操作实例


Posted in Javascript onDecember 24, 2015

本文实例讲述了jquery.cookie实现的客户端购物车操作。分享给大家供大家参考,具体如下:

//购物车
var Cart = function () {
  this.Count = 0;
  this.Total = 0;
  this.Items = new Array();
};
//购物车集合对象
var CartItem = function () {
  this.Id = 0;
  this.Name = "";
  this.Count = 0;
  this.Price = 0;
};
 
//购物车操作
var CartHelper = function () {
  this.cookieName = "yxhCart";
  this.Clear = function () {
    var cart = new Cart();
    this.Save(cart);
    return cart;
  };
  //向购物车添加
  this.Add = function (id, name, count, price) {
    var cart = this.Read();
    var index = this.Find(id);
    //如果ID已存在,覆盖数量
    if (index > -1) {
      cart.Total -= (((cart.Items[index].Count * 100) * (cart.Items[index].Price * 100)) / 10000);
      cart.Items[index].Count = count;
      cart.Total += (((cart.Items[index].Count * 100) * (cart.Items[index].Price * 100)) / 10000);
    } else {
      var item = new CartItem();
      item.Id = id;
      item.Name = name;
      item.Count = count;
      item.Price = price;
      cart.Items.push(item);
      cart.Count++;
      cart.Total += (((cart.Items[index].Count * 100) * (cart.Items[index].Price * 100)) / 10000);
    }
    this.Save(cart);
    return cart;
  };
  //改变数量
  this.Change = function (id, count) {
    var cart = this.Read();
    var index = this.Find(id);
    cart.Items[index].Count = count;
    this.Save(cart);
    return cart;
  };
  //移出购物车
  this.Del = function (id) {
    var cart = this.Read();
    var index = this.Find(id);
    if (index > -1) {
      var item = cart.Items[index];
      cart.Count--;
      cart.Total = cart.Total - (((item.Count * 100) * (item.Price * 100)) / 10000);
      cart.Items.splice(index, 1);
      this.Save(cart);
    }
    return cart;
  };
  //根据ID查找
  this.Find = function (id) {
    var cart = this.Read();
    var index = -1;
    for (var i = 0; i < cart.Items.length; i++) {
      if (cart.Items[i].Id == id) {
        index = i;
      }
    }
    return index;
  };
  //COOKIE操作
  this.Save = function (cart) {
    var source = "";
    for (var i = 0; i < cart.Items.length; i++) {
      if (source != "") { source += "|$|"; }
      source += this.ItemToString(cart.Items[i]);
    }
    $.cookie(this.cookieName, source);
  };
  this.Read = function () {
    //读取COOKIE中的集合
    var source = $.cookie(this.cookieName);
    var cart = new Cart();
    if (source == null || source == "") {
      return cart;
    }
    var arr = source.split("|$|");
    cart.Count = arr.length;
    for (var i = 0; i < arr.length; i++) {
      var item = this.ItemToObject(arr[i]);
      cart.Items.push(item);
      cart.Total += (((item.Count * 100) * (item.Price * 100)) / 10000);
    }
    return cart;
  };
  this.ItemToString = function (item) {
    return item.Id + "||" + escape(item.Name) + "||" + item.Count + "||" + item.Price;
  };
  this.ItemToObject = function (str) {
    var arr = str.split('||');
    var item = new CartItem();
    item.Id = arr[0];
    item.Name = unescape(arr[1]);
    item.Count = arr[2];
    item.Price = arr[3];
    return item;
  };
};

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
用jQuery打造TabPanel效果代码
May 22 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
深入理解node.js之path模块
May 03 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 #Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 #Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 #Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 #Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 #Javascript
jquery遍历函数siblings()用法实例
Dec 24 #Javascript
jQuery中的siblings用法实例分析
Dec 24 #Javascript
You might like
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
php经典算法集锦
2015/11/14 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
使用EXT实现无刷新动态调用股票信息
2008/11/01 Javascript
JavaScript实现简单的时钟实例代码
2013/11/23 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
python封装对象实现时间效果
2020/04/23 Python
Python 列表(List)操作方法详解
2014/03/11 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
浅谈django orm 优化
2018/08/18 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
Python使用QQ邮箱发送邮件实例与QQ邮箱设置详解
2020/02/18 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
德国网上花店:Valentins
2018/08/15 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
理工大学毕业生自荐信
2013/11/01 职场文书
大学生军训广播稿
2014/01/24 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
爱祖国演讲稿
2014/05/04 职场文书
入党自荐书范文
2015/03/05 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
大学迎新生的欢迎词
2019/06/25 职场文书