How2j仿写天猫五购物车

全选
选中一个
6.6日 16:11更新购物车

我胡汉三又回来了，有几天没更新了吧，惭愧！
昨天到今天终于把购物车啃出来了，不容易啊。现在想想也不是挺难嘛，为何还看了那么久。是不是有点马后炮，哈哈。怎么说呢，购物车需要写的jquery挺多的，一开始看到那么多久头疼。

因为里面有的功能是重复的，所以把重复的内容拿出来放到函数里，需要用到时在调用他。全选，图片前面的小框其实是图片，选中的时候就换成选中的图片。我一开始还以为这是一个复选框呢。不过，这样也更容易实现，挺佩服站长的。

选中图片时，小框图片换成选中的图片，当前行改变背景色，下面的结算按钮背景也换成红色，还要判断是不是所有行的图片都选中了，如果选中了就把全选换成选中。所以，在这个事件里，要调用的三个函数，分别实现这些。

<script>
$("img.cartProductItemIfSelected").click(function(){
      var selectit =  $(this).attr("selectit");
      if("selectit" == selectit){
        $(this).parents("tr.trInfo").css("background-color" , "white");
        $(this).attr("src" , "http://how2j.cn/tmall/img/site/cartNotSelected.png");
        $(this).attr("selectit" , "false");
      }
      else{
        $(this).parents("tr.trInfo").css("background-color" , "#FFF8E1");
        $(this).attr("src" , "http://how2j.cn/tmall/img/site/cartSelected.png");
        $(this).attr("selectit" , "selectit");
      }
       checkAll();
       accountNumber();
       accountBotton();
      });
</script>

当鼠标点击小方框时，取出当前元素的selectit,这个元素属性是自定义的，初始化为false，
当selectit为false时代表未选中，为selectit时代表选中。然后就判断selectit是否为selectit如果相等，就把背景色改成和原来一样，图片改成未选中，并且把selectit改为false.如果是false,把背景色改成黄色，图片改成选中。改变背景色，这里用的是$(this).parents("tr.trInfo").css();代表的是当前元素的tr.trInfo这个父元素，如果parents("tr.trInfo")括号为空，则默认为他的所有父元素。

现在就是调用其他函数了，先调用checkAll()这个函数，代表全选是否打开，代码如下。

 function checkAll(){
    var selectAll = true;
    $("img.cartProductItemIfSelected").each(function(){
        if ("false" == $(this).attr("selectit"))
              selectAll = false;
    });
     if (selectAll){
        $("img.selectAllItem").attr("src" , "http://how2j.cn/tmall/img/site/cartSelected.png");
     }
     else{
        $("img.selectAllItem").attr("src" , "http://how2j.cn/tmall/img/site/cartNotSelected.png" );
     }
   }

先遍历每行小方框，把每个小方框的selectit属性都拿来和false比较，判断是否有没有被选中的，只要有一个未被选中，就把变量selectAll设为假，然后就判断变量。如果为真 ，就把全选改为选中，为假则相反。

接下来就是** accountNumber();**这个函数了，这个函数是把结算那里的价格改成选中的价格。代码如下

     function accountNumber(){
        var sum = 0;
        var totalNum = 0;
     $("img.cartProductItemIfSelected[selectit = 'selectit']").each(function(){
      var oiid =    $(this).attr("oiid");
      var price = $("span.priceMoney[oiid = "+oiid+"]").text();
      price = price.replace(/,/g , "");
      price = price.replace(/￥/g , "");
      sum += new Number(price);
      var ShuRu = $("input.inputSee[oiid = "+oiid+"]").val();
      totalNum += new Number(ShuRu);
       });
      $("span.JiaGe1").html("￥" + formatMoney(sum));
      $("span.JiaGe2").html("￥" + formatMoney(sum));
      $("JianShu").html(totalNum);
    }

** $("img.cartProductItemIfSelected[selectit = 'selectit']").each(function()这句代码，代表遍历选中的小方框，oiid也是自定义的属性，然后获取当前元素属性oiid的值，在金额那里也设了这个属相，并且和当前行相等，每一行的oiid**值都不一样，这样才好找每一行的金额。

** var price = $("span.priceMoney[oiid = "+oiid+"]").text();** 这样就是找和当前元素oiid值一样的金额，并把金额里的文本内容取出来。因为金额里面有￥和,这两个符号，所以就用replace这个函数去掉，然后把取出来的金额相加，还有下面有一个件数，再把件数取出来相加。最后改变结算按钮前面文本内容为相加后的金额，件数。

最后调用** accountBotton();**函数，这个函数是改变按钮背景色以及解除禁用。代码如下。

function accountBotton(){
     var buttonAll = false;
     $("img.cartProductItemIfSelected").each(function(){
        if ("selectit" == $(this).attr("selectit")){
            buttonAll = true;
        }
        
     });
     if (buttonAll){
         $("button.button1").css("background-color" , "#C40000");
         $("button.button1").removeAttr("disabled");
        }
     else{
        $("button.button1").css("background-color" , "#AAAAAA");
        $("button.button1").attr("disabled" , "disabled");
        
     }
   }

 }); 

改变背景色，遍历小方框。如果小方框有一个选中了，就改变按钮的背景色，并解除禁用。disabled属性是禁用按钮，也就无法鼠标点击按钮，没选中就相反。

下面就是键盘按下输入框事件发生的 事了，代码如下。

 $("input.inputSee").keyup(function(){
        var pid = $(this).attr("pid");
        var XianZhi = $("span.XianZhi[pid = "+pid+"]").text();
        var price = $("span.spanShu[pid = "+pid+"]").text();
        var num = $("input.inputSee[pid = "+pid+"]").val();
        num = parseInt(num);
        if (isNaN(num))
            num = 1;
        if (num > XianZhi)
            num = XianZhi;
        if (num <= 0)
            num = 1;
        synPrice(pid , price , num);
      });

pid也是自定义的属性，和oiid差不多主要是找到一行的数据纽带。XianZhi
这个标签是库存， 也就是最大值。和spanShu这两个标签是隐藏的，设这两个标签主要是取值方便。取出输入框的值，不能是字符不能超过库存和小于0，然首把取到的值放到下面的函数，代码如下。

function synPrice(pid, price , num){
        $("input.inputSee[pid = "+pid+"]").val(num);
        var totalNum = formatMoney(price * num);
        $("span.priceMoney[pid = "+pid+"]").html("￥" + totalNum);
        accountNumber();

     }

把输入框和pid值相等的写入修改好的值，再把金额那里的内容修改成增加后的值。

  $("a.aTop").click(function(){
        var pid = $(this).attr("pid");
        var XianZhi =  $("span.XianZhi[pid = "+pid+"]").text();
        var price = $("span.spanShu[pid = "+pid+"]").text();
        var num = $("input.inputSee[pid ="+pid+"]").val();
        num--;
        if (num <= 0)
            num = 1;
        synPrice(pid , price , num);
      });

 $("a.aDown").click(function(){
        var pid = $(this).attr("pid");
        var XianZhi =  $("span.XianZhi[pid = "+pid+"]").text();
        var price = $("span.spanShu[pid = "+pid+"]").text();
        var num = $("input.inputSee[pid ="+pid+"]").val();
        num++;
        if (num > XianZhi)
            num = XianZhi;
        synPrice(pid , price , num);
      });

上面两个事件，分别是点击+和-后发生的事，比较简单。下面的是把金额修改成千为表示法，也就是在千位后加分号。

function formatMoney(num){
    num = num.toString().replace(/\$|\,/g,'');  
    if(isNaN(num))  
        num = "0";  
    sign = (num == (num = Math.abs(num)));  
    num = Math.floor(num*100+0.50000000001);  
    cents = num%100;  
    num = Math.floor(num/100).toString();  
    if(cents<10)  
    cents = "0" + cents;  
    for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)  
    num = num.substring(0,num.length-(4*i+3))+','+  
    num.substring(num.length-(4*i+3));  
    return (((sign)?'':'-') + num + '.' + cents);  
}