jquery的cookie实现购物车逻辑(摘抄)

因为之前做购物车做的redis。

购物车不仅仅可以存在服务端的redis中,也可以存在前端的cookie中
别忘记依赖。

jquery-1.12.1.min.js
jquery.cookie.js

这是我用的俩个依赖

//购物车
    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 = "{$member_id}_repast_cart";
    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);

        if(count==0){
            this.Del(id);

        }else{
            //如果ID已存在,覆盖数量
            if 
  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是一个简单的使用jQuery实现购物车的例子: ```html <!DOCTYPE html> <html> <head> <title>购物车</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> .item { margin-bottom: 10px; } .item input[type="checkbox"] { margin-right: 5px; } .total { font-weight: bold; } </style> </head> <body> <h1>购物车</h1> <div class="item"> <input type="checkbox" class="checkbox"> <span>商品1 - 100元</span> </div> <div class="item"> <input type="checkbox" class="checkbox"> <span>商品2 - 200元</span> </div> <div class="item"> <input type="checkbox" class="checkbox"> <span>商品3 - 300元</span> </div> <div class="total"> 总价:<span id="totalPrice">0</span>元 </div> <script> $(document).ready(function() { // 全选按钮点击事件 $("#selectAll").click(function() { $(".checkbox").prop("checked", $(this).prop("checked")); calculateTotalPrice(); }); // 单个商品复选框点击事件 $(".checkbox").click(function() { calculateTotalPrice(); }); // 计算总价 function calculateTotalPrice() { var totalPrice = 0; $(".checkbox:checked").each(function() { var price = parseInt($(this).next().text().split(" - ")[1]); totalPrice += price; }); $("#totalPrice").text(totalPrice); } }); </script> </body> </html> ``` 这个例子中,我们使用了jQuery实现购物车的功能。每个商品都有一个复选框和对应的价格,用户可以通过勾选复选框来选择要购买的商品,同时总价会实时更新。点击全选按钮可以全选或取消全选。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值