购物车结算功能模块

这个案例拖延了三天，今天终于给补上了。

购物车结算的功能，主要就是更新商品的数据了。主要利用的知识是jQuery中元素的获取、获取元素的子元素或父元素、操作元素属性和元素的文本内容以及对jQuery选择器的应用，等等吧。反正就是把JavaScript里的操作在这里更好的用jQuery实现。

这个案例的核心价值我认为就是数据的获取与转换，以及遍历元素。练习的价值还是挺高的，还有就是更让我们清除的认识到结构的作用。

废话不多说，先看下我们需要实现的几个功能吧。

如图所示，五个部分。

 

1.  全选按钮 和 商品对应的按钮。

这个部分有两个部分，首先是全选按钮选中时下面所有的商品按钮会选中；其次就是商品部分的按钮全选中时全选按钮被选中，有一个商品按钮没有选中时全选按钮就不选中。

这里注册事件是用change事件，表示表单发生变化，简单来说就是表单checked属性发生变化。代码里面的注释很详细了，可以看看哈。

        // 1.实现全选按钮控制小按钮
        // 1.1 小按钮的状态与全选按钮的状态保持一致 prop()固有属性检测表单是否被选中
        $(".checkall").change(function () {
            $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
            // 改变背景色
            if ($(this).prop("checked")) {
                // 添加类 改变背景色
                $(this).parents(".cart-item").addClass("check-cart-item");
            } else {
                // 移除类
                $(this).parents(".cart-item").toggleClass("check-cart-item");
            }
            getSum();
        })

        // 1.2 小按钮的状态决定全选按钮状态
        $(".j-checkbox").change(function () {
            // if(按钮选中的个数 === 按钮的总个数){
            // 全选选中
            // }else{
            // 不选择全选
            // }
            if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
                $(".checkall").prop("checked", true);
            } else {
                $(".checkall").prop("checked", false);
            }
            // 选中时，背景色改变
            // ele.parents("指定父级元素")
            if ($(this).prop("checked")) {
                $(this).parents(".cart-item").addClass("check-cart-item");
            } else {
                $(this).parents(".cart-item").toggleClass("check-cart-item");
            }
            // 重新计算小计部分
            getSum();
        })

 

2. 点击+ - 按钮，实现商品数量的变化；3. 按钮-/+改变商品数量，同时更新商品总价

这里就是注册点击事件，核心就是确定的是当前点击的按钮对应的表单的值变化。通过当前点击的元素找到对应的表单,获取表单的值是使用val()方法，普通元素的内容是text()和html()。+按钮的实现过程与-相似，+有详细的过程。-按钮需要做一个判断，商品数不能小于0.

这里我们这更新总价放一块了，以为点击-/+按钮时，右边的小计部分就要实时变化。

        // 2.点击+ -按钮来增加和减少商品数量
        // 2.1 +添加数量
        $(".increment").click(function () {
            // 获取当前 + 的兄弟表单的值 
            var n = $(this).siblings(".itxt").val();
            // 然后点击一次自增——商品数量
            n++;
            // console.log(n);
            // 数量：表单的商品数量
            $(this).siblings(".itxt").val(n);
            // 当前被点击的 + 区域对应的单价
            var p = $(this).parents(".p-num").siblings(".p-price").text();
            // 返回的是字符串 所以要把￥截取掉 使用substr()截取
            // 截取后还是字符串，用parseFloat转换为数值型
            p = parseFloat(p.substr(1));
            console.log(p);
            // 获取当前的总价
            var price = $(this).parents(".p-num").siblings(".p-sum").text();
            // 去掉￥符号
            price = parseFloat(price.substr(1));
            // 保留两位小数点 toFixed(2)
            price = (p * n).toFixed(2);
            console.log(price);
            // 把计算好的商品总和价放到标签里
            $(this).parents(".p-num").siblings(".p-sum").text("￥" + price);
            // 重新计算小结部分的总额
            getSum();
        })
        // 2.2 -号减少数量 
        $(".decrement").click(function () {
            // 一定是当前加号的兄弟表单的值自增
            var n = $(this).siblings(".itxt").val();
            // 商品数量
            n--;
            console.log(n);
            // 三元表达式：判断数量不能小于0
            n = n <= 0 ? 1 : n;
            $(this).siblings(".itxt").val(n);
            // 当前+号区域的单价
            var p = $(this).parents(".p-num").siblings(".p-price").text();
            p = parseFloat(p.substr(1));
            console.log(p);
            // 获取当前的总价
            var price = $(this).parents(".p-num").siblings(".p-sum").text();
            // 去掉￥符号
            price = parseFloat(price.substr(1));
            price = (p * n).toFixed(2);
            console.log(price);
            $(this).parents(".p-num").siblings(".p-sum").text("￥" + price);
            getSum();
        })

做到这里，能实现点击-/+按钮，改变商品数量，对应的小计也发生变化。但是，这里存在一个bug，就是当用户自己输入商品数量时，小计部分的总额是不变化的，这就很惊悚了。

所以，这里还需要判断一下用户改变表单内容的事件。可以用change事件注册，但是用户体验不好，需要在空白处点击一次小计才会更新，这里我用的是键盘弹起keyup事件。

    // 3. 这样的话 有一个bug，当用户自己更改表单的内容时就会出错
        $(".itxt").keyup(function () {
            var n = $(this).val();
            var p = $(this).parents(".p-num").siblings(".p-price").text();
            p = parseFloat(p.substr(1));
            var price = $(this).parents(".p-num").siblings(".p-sum").text();
            // 去掉￥符号
            price = parseFloat(price.substr(1));
            price = (p * n).toFixed(2);
            console.log(price);
            $(this).parents(".p-num").siblings(".p-sum").text("￥" + price);
            getSum();
        })

 

4. 结算购物车部分

这部分用到了jQuery元素的遍历，each()。jQuery中存在的隐式迭代是对不同元素进行相同的操作，现在我们需要对不同的元素做不同的操作，此时我们就需要遍历元素了。遍历每个模块中的商品数量进行累加就是购物车总数量，遍历每个模块中的商品小计进行累加就是购物车结算总额。我们可以封装一个函数，因为只有有变动我们都需要更新数据，实时更新购物车对应的数据，所以封装一个函数比较好。这就不难解释，为什么每次点击-/+按钮时，需要在最后调用一次本函数了。

注意：只有商品被选中时，才会参与购物车结算的。

    // 封装一个函数，用来计算小结的内容
        function getSum() {
            var totalNumber = 0; // 总件数
            var totalPrice = 0; // 总价钱
            // 遍历car-item所有的表单中的商品数量 累加 算出所有商品的总数量
            $(".itxt").each(function (i, ele) {
                // 判断 商品对应的按钮是否选中，选中才会结算 不选中不参与结算
                var singleBtn = $(this).parents(".p-num").siblings(".p-checkbox").children(".j-checkbox");
                if (singleBtn.prop("checked")) {
                    totalNumber += parseFloat($(ele).val());
                }
            })
            $(".amount-sum em").text(totalNumber);

            // 遍历每个car-item中的商品总计 累加起来算出所有商品价
            $(".p-sum").each(function (i, ele) {
                var singleBtn = $(this).siblings(".p-checkbox").children(".j-checkbox");
                if (singleBtn.prop("checked")) {
                    totalPrice += parseFloat($(ele).text().substr(1));
                }
            })
            $(".price-sum em").text("￥" + totalPrice.toFixed(2));
        }

 

5.删除模块

这部分比较简单，就是点击事件的注册，主要是要找到点击时，删除对应的父结构。切记切记，删除的永远是当前被点击按钮对应的结构，核心就是this的问题。

        // 5. 删除模块
        // 删除按钮
        $(".p-action a").click(function () {
            $(this).parents(".cart-item").remove();
            getSum();
        })
        // 删除选中的商品
        $(".operation .remove-batch").click(function () {
            $(".j-checkbox:checked").parents(".cart-item").remove();
            getSum();
        })
        // 清空购物车
        $(".operation .clear-all").click(function () {
            $(".cart-item").remove();
            getSum();
        })

删除第一个后：

点击删除所选中商品按钮：

清空：

 

最后附上结构代码，一个商品列部分。

                    

                        

                            
                        
                        

                            

                                
                            
                            
【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽
                        
                        
￥24.80
                        

                            

                                -
                                
                                +
                            
                        
                        
￥24.80
                        
删除
                    

 

完整的html 

        

            

                全部商品
            
            
            

                
                

                    

                         全选
                    
                    
商品
                    
单价
                    
数量
                    
小计
                    
操作
                
                
                

                    

                        

                            
                        
                        

                            

                                
                            
                            
【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲
                        
                        
￥12.60
                        

                            

                                -
                                
                                +
                            
                        
                        
￥12.60
                        
删除
                    
                    

                        

                            
                        
                        

                            

                                
                            
                            
【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽
                        
                        
￥24.80
                        

                            

                                -
                                
                                +
                            
                        
                        
￥24.80
                        
删除
                    
                    
                

                
                

                    

                        全选
                    
                    

                         删除选中的商品
                        清理购物车
                    
                    

                        
已经选1件商品
                        
总价： ￥12.60
                        
去结算