純jquery實(shí)現(xiàn)模仿淘寶購物車結(jié)算

更新時間：2015年08月20日 15:29:20 投稿：mrr

在淘寶購物，需要把商品加入購車，其中包含全選、單選金額改變，當(dāng)增加商品時金額也會相應(yīng)的發(fā)生變化，下面通過本文給大家分享純jquery實(shí)現(xiàn)模仿淘寶購物車結(jié)算，需要的朋友可以參考下

這篇文章里，將會提到購物車?yán)锏乃泄δ?。包括全選、單選金額改變。在增加數(shù)量時金額也會相應(yīng)改變。

效果圖展示：

說下大致的思路吧：

1、首先是計算一行的價格。這個功能在上篇博客里有提到，這里就不列舉出來了。

2、遍歷選中的幾行，將每行的數(shù)值相加。

3、將值賦給總金額顯示出來。當(dāng)取消勾選或加減數(shù)量時，金額會相應(yīng)改變。

下面是具體的js部分：

<script type="text/javascript">
  $(function(){
    //計算總金額
    function totalMoney(){
      var total_price = 0;
      var total_count = 0;
      $(".d1-input").each(function(){
        if($(this).hasClass('status')) {
          var obj1 = $(this).parent().siblings(".d4").find(".count").val();//獲取一行的商品數(shù)量
          total_count += parseInt(obj1);
          var obj2= $(this).parent().siblings(".d5").find(".cart-price").text();//獲取一行的金額
          total_price += parseInt(obj2);
        }
      });
      $(".item").text(total_count);//將計算出的總金額顯示
      $(".total").text(total_price);//將計算出的總數(shù)量顯示
    }
    //全選
    $(".d-input").toggle( function(){
      $(this).addClass("status");
      $(".sc-mid-list .d1-input").addClass("status");//添加勾選樣式
      $(".sc-mid-list").addClass("mouseover");
      totalMoney();
      },
      function(){
      $(this).removeClass("status");
      $(".sc-mid-list .d1-input").removeClass("status");//取消勾選樣式
      $(".sc-mid-list").removeClass("mouseover");
      totalMoney();
    });
    // 單選
    $(".d1-input").toggle( function(){
      $(this).addClass("status");//添加勾選樣式
      $(this).parents(".sc-mid-list").addClass("mouseover");
      totalMoney();
      },
      function(){
      $(this).removeClass("status");//取消勾選樣式
      $(this).parents(".sc-mid-list").removeClass("mouseover");
      totalMoney();
    });
    // 減號樣式
    function count(){
      $(".count").each(function(){
        var num = $(this).val();
        if (num == 1) {
          $(this).siblings(".reduce").removeClass("two").addClass("one");
          $(this).siblings(".reduce").attr("disabled","disabled");
        } else {
          $(this).siblings(".reduce").removeClass("one").addClass("two");
        }
      })//根據(jù)數(shù)量是否為1，改變減號的樣式
    }
    // 加
    $(".sc-mid-list .add").click(function(){
      var input = $(this).siblings(".count");
      var obj = $(this).parents(".d4");
      var per = parseFloat(obj.siblings(".d3").find(".per").text());//獲取當(dāng)前一行的單價
      var num = '';
      var price = '';
      input.attr("value", parseInt(input.attr("value")) + 1 );//數(shù)量加1
      num = input.attr("value");
      price = num*per;//
      obj.siblings(".d5").find(".cart-price").text(price);
      count();
      totalMoney();
    })
    // 減
    $(".sc-mid-list .reduce").click(function(){
      var input = $(this).siblings(".count");
      var obj = $(this).parents(".d4");
      var per = parseFloat(obj.siblings(".d3").find(".per").text());//獲取當(dāng)前一行的單價
      var num = '';
      var price = '';
      var Val = parseInt(input.attr("value"));
      if(Val <= 1){
        Val = 2;
        }
      input.attr("value", parseInt(Val) - 1 );//數(shù)量減1
      num = input.attr("value");
      price = num*per;//
      obj.siblings(".d5").find(".cart-price").text(price);
      count();
    })
  })
</script>

jquery模仿淘寶懸掛購物車物品結(jié)算功能-附源碼下載