初学jQuery之jQuery虚假购物车-------与真实数据无关

初学者用jquery来写仿真的购物车，确实有点恶心，那我们今天就把这万恶的购物车剖析一下，来看看到底有什么难的.

购物车的效果图

那我们先从复选框开始吧，废话不多说，上代码！！

带有序号的，都是一些分析！

1.全选或全不选效果

//点击复选框全选或全不选效果
    $("#allCheckBox").click(function(){
        var checked=$(this).is(":checked");   //检查这个集合里有没有匹配的元素   返回true，false
        $(".cart_td_1").children().attr("checked",checked);     //把上面的变量放在这边来用
    });
    //判断是否全选
    function ifAllChecked(){
        var checkedBoxs=$(".cart_td_1").children();   //获取到集合
        var sum=checkedBoxs.size();     //size() 与length() 返回的值是一样的
        var k=0;    //迭代变量
                                 //each是循环
        checkedBoxs.each(function(index,dom){   //index当前对象的索引，或者是所有的对象的索引      dom当前对象，或者是对象
            if($(dom).is(":checked")) k++;    //匹配页面上处于选中状态的元素  
        });
        if(k==sum){   //当我们拿出了input复选框的个数
            $("#allCheckBox").attr("checked",true);   //如果为true的话，就改变值
        }else{
            $("#allCheckBox").attr("checked",false);   //否则的话，我们也改变值
        }
    }
    ifAllChecked();//页面加载完后运行
    //单选判断
    $(".cart_td_1").children().click(function(){
        ifAllChecked();     
    });

当我们解决了复选框的问题后，剩下的就是计算总价与小计的问题了，其实咋们仔细想想的话，压根就不难，难的是这些值它们全在html页面上，我们该怎么把他们拿下来，为我们所用哪？！！！！

2.进行计算函数

//计算总价与小计
    function productCount(){
                
       var $tr=$("#shopping").find("tr[id]");
        
        //总价与积分的初始值
        var summer=0;
        var integral=0;
        
        $tr.each(function(i,dom){
            
            //我们开始把页面上的值全部拿下来
            var num=$(dom).children(".cart_td_6").find("input").val();//商品数量
            var price=num*$(dom).children(".cart_td_5").text();//商品小计
            
            $(dom).children(".cart_td_7").html(price);//显示商品小计
            summer+=price;//总价  已经开始在累加
            integral+=$(dom).children(".cart_td_4").text()*num;//积分
        });
        $("#total").text(summer);   //总价
        $("#integral").text(integral);   //积分
    }
    productCount();//页面加载完后运行

3.点击减号或加号得行为

//商品增加减少，flag为true时增加，flag为false时减少
    function changeNumber(dom,flag){
        var $input = $(dom).parent().find("input");
        var value = $input.val();
      
      if(flag){
            value++;    
        }else{
            value--;
            if(value<=0){   //最起码件数不能低于0件，
                value=1;    //当我们已经规定了不能低于0件的时候，我们到底还是把件数减了，所以我们还是的把件数调整回来
                alert("宝贝数量必须大于0");  
            }
        }
        $input.val(value);
        productCount();
    };

因为加号和减号是图片，所以我们得把函数绑定到图片上

4.把点击加减函数绑定到图片上

 //点击减少     当我们点击图片的时候，顺便调用一下方法
    $(".cart_td_6").find("img[alt='minus']").click(function(){changeNumber(this,false);});
    //点击增加
    $(".cart_td_6").find("img[alt='add']").click(function(){changeNumber(this,true);});
    

当然我们还有删除某一列商品，所以我使用了节点操作

5.节点操作

   //点击删除   节点操作
    $(".cart_td_8").find("a").click(function(){
        $(this).parent().parent().prev().remove();//删除前一tr
        $(this).parent().parent().remove();//删除当前tr
        productCount();
    });

还有删除所选，所以我们自己还得自定义一个函数

6.删除所选

 //点击删除所选
    $("#deleteAll").click(function(){
        $("#shopping").find("tr[id]").each(function(i,e){
            var $tr=$(e);
            //返回的值是true或false
            var checked=$tr.children(".cart_td_1").children().is(":checked");
            if(checked){
                //prev遍历的方式用于搜索自己本身同辈元素的上一个
                $tr.prev().remove();
                $tr.remove();
            }
        });
        //点击删除所选，依然调用计算总价的函数
        productCount();
    });

所以经过我们层层的解析，其实压根也不难，对吧！！！

我们这个虚假的购物车，才算完成！！！

那我们下次再见把！