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

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

初学者用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();
    });

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

我们这个虚假的购物车,才算完成!!!

那我们下次再见把!