用jQuery實現移動端手機商城購物車功能實現

購物車數量加減

右加號

$(".jiahao").click(function() {
    var t = $(this).siblings().find("input");//取到數量
     t.val(parseInt(t.val()) + 1);//parseInt()解析input一個字符串，返回一個整數
     heji();//調用后面計算的函數
})

左減號

$(".jianhao").click(function() {
   var t = $(this).siblings().find("input");
   t.val(parseInt(t.val()) - 1);
   //當數量小於1的時候讓最小值等於1
   if(parseInt(t.val()) < 1) {
         t.val(1)
   };
    heji();
})

計算商品總價

function heji() {
   $(".gwcar").each(function() {//循環整個購物車
     var oprice = 0; //商品總價
     $(this).find(".glist").each(function() {//循環購物車里的每個商品，this值得是這個購物車
        if($(this).find(".btn").hasClass("option1") == true) {//判斷商品被選中的情況下，this指的是購物車的三個商品
          var num = $(this).find(".shuliang").val();//取到數量，this指的還是購物車的商品一個
          var danjia = $(this).find(".danjia").text();
          var xiaoji = num * danjia; //商品小計
          oprice += xiaoji;
          $(".zongjia").html(oprice);
      };
    });
   });
  };

最后附圖一張