购物车案例

最新推荐文章于 2023-07-21 20:27:24 发布

龙眸

最新推荐文章于 2023-07-21 20:27:24 发布

阅读量135

点赞数

分类专栏：笔记文章标签： javascript 前端 html5 jquery

本文链接：https://blog.csdn.net/weixin_52065872/article/details/124681449

版权

笔记专栏收录该内容

73 篇文章 1 订阅

订阅专栏

案例分析

全选分析
实现全选代码

$(function() {
    // 1. 全选 全不选功能模块
    // 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
    // 事件可以使用change
    $(".checkall").change(function() {
        // console.log($(this).prop("checked"));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
    });
    // 2.如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选
    $(".j-checkbox").change(function() {
        // if(被选中的小的复选框的个数===3){
        //     被要选中全选按钮
        // }else{
        //     不要选中全选按钮
        // }
        // $(".j-checkbox").length这个是所有小复选框的个数
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
    })
})

## 案例实现代码
实现商品数量增减

// 3.增减商品数量模块 首先声明一个变量，当我们点击+号(increment),就让这个值++，然后赋值给文本框。
    //加
    $(".increment").click(function() {
        // 得到兄弟文本框
        var n = $(this).siblings(".itxt").val();
        // console.log(n);
        n++;
        $(this).siblings(".itxt").val(n);
    });
    // 减
    $(".decrement").click(function() {
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
        }
        // console.log(n);
        n--;
        $(this).siblings(".itxt").val(n);
    });

在这里插入图片描述
代码如下

// 3.增减商品数量模块 首先声明一个变量，当我们点击+号(increment),就让这个值++，然后赋值给文本框。
    //加
    $(".increment").click(function() {
        // 得到兄弟文本框
        var n = $(this).siblings(".itxt").val();
        // console.log(n);
        n++;
        $(this).siblings(".itxt").val(n);
        // 3.计算小计模块 根据文本框的值 乘以 当前商品的价格 就是 商品的小计
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);得到当前商品的价格
        // 去掉￥符号
        p = p.substr(1);
        console.log(p);
        // 小计模块
        // .parents(".p-num") 返回指定的祖级
        var price = (p * n).toFixed(2);
        // toFixed(2)可以让我们的结果保留2位小数
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
    });
    // 减
    $(".decrement").click(function() {
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
        }
        // console.log(n);
        n--;
        $(this).siblings(".itxt").val(n);
        // 3.计算小计模块 根据文本框的值 乘以 当前商品的价格 就是 商品的小计
        // var p = $(this).parent().parent().siblings(".p-price").html();
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);得到当前商品的价格
        // 去掉￥符号
        p = p.substr(1);
        console.log(p);
        // 小计模块
        // var price = (p * n).toFixed(2);
        // $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
    });
    // 4.用户修改文本框的值 计算 小计模块
    $(".itxt").change(function() {
        // 先得到文本框的里面的值 乘以 当前商品的单价
        var n = $(this).val();
        // 当前商品的单价
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // 截取￥
        p = p.substr(1);
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
    })

在这里插入图片描述

// 5.计算总计 和 总额模块
    getSum();

    function getSum() {
        var count = 0; //计算总件数
        var money = 0; //计算总价钱
        $(".itxt").each(function(i, ele) {
            count += parseInt($(ele).val());
        });
        $(".amount-sum em").text(count);
        $(".p-sum").each(function(i, ele) {
            money += parseFloat($(ele).text().substr(1));
        });
        $(".price-sum em").text("￥" + money.toFixed(2));
    }

在这里插入图片描述

// 6.删除商品模块
    // (1)商品后面的删除按钮
    $(".p-action a").click(function() {
        // 删除的是当前的商品
        $(this).parents(".cart-item").remove();
        getSum();
    });
    // (2)删除选中的商品
    $(".remove-batch").click(function() {
        // 删除的是小的复选框选中(checked)的商品
        $(".j-checkbox:checked").parents(".cart-item").remove();
        getSum();
    });
    // (3)清空购物车 删除全部商品
    $(".clear-all").click(function() {
        $(".cart-item").remove();
        getSum();
    });

在这里插入图片描述
所有js代码

$(function() {
    // 1. 全选 全不选功能模块
    // 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
    // 事件可以使用change
    $(".checkall").change(function() {
        // console.log($(this).prop("checked"));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
        // 选中商品添加背景
        if ($(this).prop("checked")) {
            // 让所有的商品添加 check-cart-item 类名
            $(".cart-item").addClass("check-cart-item");
        } else {
            $(".cart-item").removeClass("check-cart-item");
        }
    });
    // 2.如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选
    $(".j-checkbox").change(function() {
        // if(被选中的小的复选框的个数===3){
        //     被要选中全选按钮
        // }else{
        //     不要选中全选按钮
        // }
        // $(".j-checkbox").length这个是所有小复选框的个数
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
        // 选中商品添加背景
        if ($(this).prop("checked")) {
            // 让当前的商品添加 check-cart-item 类名
            $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
            $(this).parents(".cart-item").removeClass("check-cart-item");
        }
    });
    // 3.增减商品数量模块 首先声明一个变量，当我们点击+号(increment),就让这个值++，然后赋值给文本框。
    //加
    $(".increment").click(function() {
        // 得到兄弟文本框
        var n = $(this).siblings(".itxt").val();
        // console.log(n);
        n++;
        $(this).siblings(".itxt").val(n);
        // 3.计算小计模块 根据文本框的值 乘以 当前商品的价格 就是 商品的小计
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);得到当前商品的价格
        // 去掉￥符号
        p = p.substr(1);
        console.log(p);
        // 小计模块
        // .parents(".p-num") 返回指定的祖级
        var price = (p * n).toFixed(2);
        // toFixed(2)可以让我们的结果保留2位小数
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
        getSum();
    });
    // 减
    $(".decrement").click(function() {
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            return false;
        }
        // console.log(n);
        n--;
        $(this).siblings(".itxt").val(n);
        // 3.计算小计模块 根据文本框的值 乘以 当前商品的价格 就是 商品的小计
        // var p = $(this).parent().parent().siblings(".p-price").html();
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);得到当前商品的价格
        // 去掉￥符号
        p = p.substr(1);
        console.log(p);
        // 小计模块
        // var price = (p * n).toFixed(2);
        // $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        getSum();
    });
    // 4.用户修改文本框的值 计算 小计模块
    $(".itxt").change(function() {
        // 先得到文本框的里面的值 乘以 当前商品的单价
        var n = $(this).val();
        // 当前商品的单价
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // 截取￥
        p = p.substr(1);
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        getSum();
    });
    // 5.计算总计 和 总额模块
    getSum();

    function getSum() {
        var count = 0; //计算总件数
        var money = 0; //计算总价钱
        $(".itxt").each(function(i, ele) {
            count += parseInt($(ele).val());
        });
        $(".amount-sum em").text(count);
        $(".p-sum").each(function(i, ele) {
            money += parseFloat($(ele).text().substr(1));
        });
        $(".price-sum em").text("￥" + money.toFixed(2));
    }
    // 6.删除商品模块
    // (1)商品后面的删除按钮
    $(".p-action a").click(function() {
        // 删除的是当前的商品
        $(this).parents(".cart-item").remove();
        getSum();
    });
    // (2)删除选中的商品
    $(".remove-batch").click(function() {
        // 删除的是小的复选框选中(checked)的商品
        $(".j-checkbox:checked").parents(".cart-item").remove();
        getSum();
    });
    // (3)清空购物车 删除全部商品
    $(".clear-all").click(function() {
        $(".cart-item").remove();
        getSum();
    });
})

龙眸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
购物车案例

案例分析实现全选代码$(function() { // 1. 全选全不选功能模块 // 就是把全选按钮（checkall）的状态赋值给三个小的按钮（j-checkbox）就可以了 // 事件可以使用change $(".checkall").change(function() { // console.log($(this).prop("checked")); $(".j-checkbox, .checkall").prop("che
复制链接

扫一扫