JQ实现前台购物车按钮及输入数量算总金额传输到后台

最近给公司做了一个H5扫码付款的项目。

其中用到了购物车按钮 如下图

• 数据库字段

款式名称 shopName

款式单价 price

推荐数量 commend_num 进入页面初始化要取的数据（2）

最大数量 max

最小数量 min

输入框不能小于最小数量 min 也不能大于最大数量

• 前台html

 @foreach (var item in result) //读取后台的数据
    {
        <div class="id" name="sku_info" style="margin-top:20px;">
            <table style="width:100%;height:auto;">
                <thead>
                    <tr>
                        <th class="sku_name" style="width:35%;text-align:left;font-size:12px;">@item.shopName</th> //商品名称
                        <th class="@item.price" style="width:15%;text-align:left;font-size:12px;">￥@item.price/@item.unit</th>//读取单价和单位
                        <th style="text-align:right;font-size:12px;width:50%;">
                            <button onclick="less('@item.sku_id','@item.min','@item.price')" ; style="width:30px;height:30px;border-radius:30px;">-</button>//减按钮
                           //数量输入框
                            <input  class="@item.sku_id" value="@item.commend_num" oninput="value=value.replace(/[^\d]/g,'')" style="width:30px;height:30px;text-align:center;font-size:12px;"/>
                            <input id="@item.sku_id" value="@item.commend_num" style="display:none;"/>//存值框隐藏
                            <button onclick="add('@item.sku_id','@item.max','@item.price')" ; style="width:30px;height:30px;border-radius:30px;">+</button>//加按钮
                        </th>
                    </tr>
                </thead>
            </table>
        </div>
    }

• 1.初始化页面上总金额 

注明：为什么初始化 数量不取数据库的推荐数量

为什么不是@tem.price * @tem.commend_num 而是 @tem.price * parseInt($("." + @tem.sku_id).val());

当你点击加号 数量增加 总金额也增加 你在进入其他页面返回刷新的时候会发现 总金额 变成初始化的总金额

如初始化（单价 50   数量2  总金额 100）点击加号（单价 50   数量3  总金额 150）

进入其他页面返回刷新的时候会变成（单价 50   数量3  总金额 100）

所以必须用@tem.price * parseInt($("." + @tem.sku_id).val());  数量取输入框的值金额就不会变

//进入页面自动加载
    $(document).ready(function (){
        //初始化总金额
         var t = 0;
        //遍历
         @foreach (var tem in  result) 
         {
              <text>
              //单价乘输入框的值
               t = t + @tem.price * parseInt($("." + @tem.sku_id).val());
              </text>
         }
        //把总金额存在id为total的标签里 防止丢失精度toFixed(2)保留两位小数
         document.getElementById("total").innerText = t.toFixed(2);

      })

• 2 ，加减按钮

在html里加减按钮是button按钮 

因为是遍历出来的值 不清楚到底有多少行数量 所以class和id值不能写死

在加按钮里面写一个点击事件onclick 把款式id 最大值，和单价传过来。如果加到大于最大值 则return出去

在减按钮里面写一个点击事件onclick 把款式id 最小值，和单价传过来。如果减到大于最小值 则return出去

款式id唯一的不会重复 是判断 用户点的是哪一行的加减按钮

再写一个函数 接收 状态 和 金额两个值 0 为增加 1 为 减少

如过是点击加 则(parseFloat(t.text()) - parseFloat(price)); 总金额加单价 减也一样。

•   //增加
      function add(id, max,price) {
          //超过最大值不能再加
          var maxs = parseInt(max);
          var num = parseInt($("." + id).val());
  
          if (num >= maxs) {
                     //  mui.alert("数量不能大于"+max);
                       return;
          }
          var nu = num + 1;
           $("." + id).val(num + 1);//加则加1
          $('#'+ id).attr('value',nu);
          setTotal('0',price);
      }
  
       //减少
      function less(id, min, price) {
               var mins = parseInt(min);
               var num =parseInt($("." + id).val());
              if (num <= mins ) {
                    //   mui.alert("数量不能少于"+min);
                       return;
          }
          var nu = num - 1;
          $("." + id).val(num - 1);//加则加1
          $("#"+ id).attr('value',nu);
          setTotal('1',price);
      }
  
      function setTotal(flag, price) {
          var t = $("#total");
          var total = 0;
          if (flag == '1') {//减少
              total = (parseFloat(t.text()) - parseFloat(price));
          } else if (flag == '0') {
              total = (parseFloat(t.text()) + parseFloat(price));
          } else {
                total = (parseFloat(t.text()) + parseFloat(price));
          }
          document.getElementById("total").innerText= total.toFixed(2);
      }
  
  

  如图

• 

• 加减按钮到此就可以实现了。但是万恶的产品经理提了新需求万一用户买100套 总不能让用户点击100次吧。需要可以输入那就麻烦点了 以下 js就是实现 核心主要取用户输入前的值，用输入后的值减去输入前的值再 再算总金额

   @foreach (var tem in result)
          {

       <text>

               $("." +@tem.sku_id).change(function () {
                var nu = $("." + @tem.sku_id).val(); //获取输入的值
                var max = @tem.max; //获取能输入的最大值
                var min =  @tem.min;//获取能输入的最小值
                var tj = @tem.commend_num; //默认值
                var t = 0;
                   if (nu > max) { //如果输入的值大于最大值
                       $("." + @tem.sku_id).prop('value', tj); //更改为默认值
                       $('#'+ @tem.sku_id).attr('value',tj); //同时存值的input也更改为默认值
                        @foreach (var item in result)
                            {
                             <text> 
                             t = t + @item.price * parseInt($("." + @item.sku_id).val());
                             </text>                                
                            }
                          document.getElementById("total").innerText = t.toFixed(2);//更改刷新总金额的值
                          return;
                        }
                 if (nu < min) {//如果输入的值小于最小值 逻辑同上
                     $("." + @tem.sku_id).prop('value', tj);
                      $('#'+ @tem.sku_id).attr('value',tj);
                       @foreach (var item in result)
                            {
                             <text>
                             t = t + @item.price * parseInt($("." + @item.sku_id).val());
                             </text>                                
                            }
                          document.getElementById("total").innerText = t.toFixed(2);
                          return;
                     return;
                  }
                var nums = $("#" + @tem.sku_id).val(); //获取旧值
                var num = nu - nums; //输入的值减去旧值
                $('#'+ @tem.sku_id).attr('value',nu); //存到存值的input框
                var p = @tem.price;
                var price = parseFloat(p) * parseInt(num);
                setTotal('3',price);
              });
       </text>

              }