纯jquery实现模仿淘宝购物车结算

前端技术 2023/09/05 JavaScript

这篇文章里，将会提到购物车里的所有功能。包括全选、单选金额改变。在增加数量时金额也会相应改变。

效果图展示：

说下大致的思路吧：

1、首先是计算一行的价格。这个功能在上篇博客里有提到，这里就不列举出来了。

2、遍历选中的几行，将每行的数值相加。

3、将值赋给总金额显示出来。当取消勾选或加减数量时，金额会相应改变。

下面是具体的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();//获取一行的商品数量
          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);//将计算出的总数量显示
    }
    //全选
    $(\".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\");
        }
      })//根据数量是否为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());//获取当前一行的单价
      var num = \'\';
      var price = \'\';
      input.attr(\"value\", parseInt(input.attr(\"value\")) + 1 );//数量加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());//获取当前一行的单价
      var num = \'\';
      var price = \'\';
      var Val = parseInt(input.attr(\"value\"));
      if(Val <= 1){
        Val = 2;
        }
      input.attr(\"value\", parseInt(Val) - 1 );//数量减1
      num = input.attr(\"value\");
      price = num*per;//
      obj.siblings(\".d5\").find(\".cart-price\").text(price);
      count();
    })
  })
</script>

jquery模仿淘宝悬挂购物车物品结算功能-附源码下载

查看演示    源码下载

本文地址：https://www.stayed.cn/item/13895

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案