jQuery实现购物车功能的案例

今天药忘吃喽~ 2023-07-09 07:29 108阅读 0赞

## 用jquery写了一个购物车的案例 ##

**功能如下**

##### 1,全选按钮和单个复选框的功能 #####

##### 2,商品数量的加减 #####

##### 3,单个商品总价随着商品数量的增减变化 #####

##### 4,实现了商品总数的变化 #####

##### 5,实现所有商品价钱之和随着商品的件数变化而变化 #####

##### 6,添加了单个商品删除功能 #####

##### 7,添加了清空购物车功能 #####

**下面是代码展示**

**jQuery代码**

$(function() { 
        // 1.全选按功能模块
        $('.allkinds').change(function() { 
            $('.kinds').prop('checked', $(this).prop('checked'))
        })
    
        $('.kinds').change(function() { 
            // 用:checked选择器 直接查找被选中的元素
            //如果被选中的复选框的个数等于 所有复选框的个数,那就把全选给选上
            if ($('.kinds:checked').length === $('.kinds').length) { 
                $('.allkinds').prop('checked', true)
            } else { 
                $('.allkinds').prop('checked', false)
            }
        })
    
        //2.数量的加减模块
        // 加模块
        $('.right').click(function() { 
            // 点击得到当前文本框的值,
            var i = $(this).siblings('.num').val();
            i++;
            //每次点击都加1,然后把值放进文本框中
            $(this).siblings('.num').val(i);
            //合计加模块
            var p = $(this).parent().siblings('.price').text()
                //截取从第二位开始 
            p = p.substr(1);
            // toFixed()方法保留几位小数,这里我需要计算后保留小数后两位
            var sum = (p * i).toFixed(2);
            $(this).parent('.we').siblings('.priceall').text("¥" + sum)
            sumall();
        })
    
        // 减模块
        $('.left').click(function() { 
            // 点击得到当前文本框的值,
            var i = $(this).siblings('.num').val();
            //这里做一个判断.如果数量小于1,那就不执行自减;
            if ($(this).siblings('.num').val() > 1) { 
                i--;
            } else { 
                return false;
            }
            //每次点击都减1,然后把值放进文本框中
            $(this).siblings('.num').val(i);
    
            //合计减模块
            //p是单价
            var p = $(this).parent().siblings('.price').text()
            p = p.substr(1);
            var sum = (p * i).toFixed(2);
            $(this).parent('.we').siblings('.priceall').text("¥" + sum)
                // console.log(i, p);
            sumall();
        })
    
        //3 当我文本框的值发生变化,总价也要发生变化 
        $('.num').change(function() { 
                //n是文本框修改后的值
                var n = $(this).val();
                // p是单价
                var p = $(this).parent().siblings('.price').text()
                p = p.substr(1);
                var sum = (p * n).toFixed(2);
                $(this).parent('.we').siblings('.priceall').text("¥" + sum)
                sumall();
            })
            //先调用一下,页面初始状态就可以获取到商品总数和花费总数
        sumall()
            //商品总数和花费总数
            //求和
        function sumall() { 
            //总件数
            var count = 0;
            //总花费
            var money = 0;
            //遍历文本框的值,然后相加
            $.each($('.num'), function(i, ele) { 
                count += parseInt($(ele).val());
            })
            $('.foot>h6').text(count)
    
            //花费
            $.each($('.priceall'), function(i, ele) { 
                money += parseFloat($(ele).text().substr(1));
            })
            $('.foot>h5').text("¥" + money.toFixed(2))
        }
        // 想求得商品总数,就要遍历文本框的值 $.each()方法可以进行遍历
    
    
        //删除商品模块
    
        //单个删除
        $('.delete').click(function() { 
                $(this).parent('.one').remove()
                sumall();
            })
            //一起删除
        $('.over').click(function() { 
            $(this).parents().siblings('.one').remove()
            sumall();
        })
    
    })

基本的购物车功能都已经实现了的.样式写的不太好希望大家理解  
写的不是很好希望大家多多鼓励,有什么意见可以联系交流一下,我正在学.

成果图展示  
样式没有写的太多,主要是实现的功能  
![在这里插入图片描述][20200228143316266.gif]  
希望有个大佬可以带我学,这样效率会比较高

[20200228143316266.gif]: https://img-blog.csdnimg.cn/20200228143316266.gif