jquery实现购物车功能

最新推荐文章于 2024-07-30 10:56:44 发布

candy_tadecheng

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量3.2k

点赞数 7

文章标签： javascript jquery html5 css

本文链接：https://blog.csdn.net/candy_tadecheng/article/details/114082569

版权

用jquery写了一个简易版的购物车，没有店铺，也请忽略这粗糙的样式…
效果如下：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cart</title>
  <style>
    .container{
      width:800px;
      height:600px;
      margin:0 auto;
    }
    .cart_wrap{
      width:800px;
      height:600px;
      overflow-y: scroll;
      margin-bottom:30px;
    }
    .cart_wrap .cart_table{
      width:100%;
      height:100%;
    }
    .cart_wrap .cart_table th{
      height:50px;
      border:1px solid #000;
      border-collapse: collapse;
    }
    .cart_wrap .cart_table td{
      border:1px solid #000;
      border-collapse: collapse;
      text-align: center;
    }
    .img_wrap{
      width:200px;
      height:100px;
      padding:10px 0;
      box-sizing: border-box;
    }
    .img_wrap img{
      width:auto;
      height:auto;
      max-width:100%;
      max-height:100%;
    }
    .settle_bar{
      margin:0 auto;
      display: flex;
      position:relative;
    }
    .settle_bar .check_all_wrap{
      width:176px;
      text-align: center;
      font-weight: bold;
    }
    .settle_bar button{
      position: absolute;
      right:0;
    }
    .goods_num_wrap span{
      width:24px;
      height: 24px;
      display: inline-block;
      border:1px solid #999;
      cursor: pointer;
    }
    .goods_num_wrap input{
      width:36px;
      height: 26px;
      text-align: center;
      border:1px solid #999;
      box-sizing: border-box;
      border-right: none;
      border-left:none;
      outline: 0;
    }
    .total_money,.checked_num{
      color:crimson;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="cart_wrap">
      <table class="cart_table" border="1" cellspacing="0">
        <tr class="cart_title">
          <th>
            <input type="checkbox" checked="checked" class="check_all">&nbsp;全选
          </th>
          <th></th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
        </tr>
        <tr class="cart_item">
          <th>
            <input type="checkbox" checked="checked" class="check_one">
          </th>
          <td class="img_wrap">
            <img src="./goods_img/1.jpg" alt="">
            <p>欧诗漫护肤套装</p>
          </td>
          <td class="goods_price">212.89</td>
          <td class="goods_num_wrap">
            <span>-</span><input type="text" value="1" class="goods_num"><span>+</span>
          </td>
          <td class="total">--</td>
        </tr>
        <tr class="cart_item">
          <th>
            <input type="checkbox" checked="checked" class="check_one">
          </th>
          <td class="img_wrap">
            <img src="./goods_img/2.jpg" alt="">
            <p>生日蛋糕</p>
          </td>
          <td class="goods_price">156.88</td>
          <td class="goods_num_wrap">
            <span>-</span><input type="text" value="1" class="goods_num"><span>+</span>
          </td>
          <td class="total">--</td>
        </tr>
        <tr class="cart_item">
          <th>
            <input type="checkbox" checked="checked" class="check_one">
          </th>
          <td class="img_wrap">
            <img src="./goods_img/3.jpg" alt="">
            <p>进口草莓</p>
          </td>
          <td class="goods_price">36.66</td>
          <td class="goods_num_wrap">
            <span>-</span><input type="text" value="3" class="goods_num"><span>+</span>
          </td>
          <td class="total">--</td>
        </tr>
        <tr class="cart_item">
          <th>
            <input type="checkbox" checked="checked" class="check_one">
          </th>
          <td class="img_wrap">
            <img src="./goods_img/4.jpg" alt="">
            <p>康乃馨花花</p>
          </td>
          <td class="goods_price">88.98</td>
          <td class="goods_num_wrap">
            <span>-</span><input type="text" value="1" class="goods_num"><span>+</span>
          </td>
          <td class="total">--</td>
        </tr>
        <tr class="cart_item">
          <th>
            <input type="checkbox" checked="checked" class="check_one">
          </th>
          <td class="img_wrap">
            <img src="./goods_img/5.jpg" alt="">
            <p>结婚对戒</p>
          </td>
          <td class="goods_price">6689.89</td>
          <td class="goods_num_wrap">
            <span>-</span><input type="text" value="1" class="goods_num"><span>+</span>
          </td>
          <td class="total">--</td>
        </tr>
      </table>
    </div>
    <div class="settle_bar">
      <div class="check_all_wrap">
        <input type="checkbox" checked="checked" class="check_all"/>&nbsp;全选
      </div>
      <span style="margin-left:100px">选中<i class="checked_num"></i>&nbsp;件商品</span>
      <span style="margin-left:100px;">合计：<i class="total_money"></i></span>
      <button>去结算</button>
    </div>
  </div>

  <script src="./jquery.min.js"></script>
  <script>
    // 1、默认全都勾选
    $(function(){
      calc()
      function calc(){
        var checked_num = 0
        var total_money =  0
        //计算每件商品小计 单价*数量（保留两位小数）
        $('.total').map((i,k)=>{ 
          $(k).text(($(k).prev().prev().text()*$(k).prev().find('.goods_num').val()).toFixed(2))
        }) 
        $('.check_one').map((i,k)=>{
          if($(k).prop('checked') == true){
            checked_num++
            var parent = $(k).parent().parent()
            total_money += parent.find('.total').text()-0
          }
        })
        //商品选中数量
        $('.checked_num').text(checked_num)
        //计算合计
        $('.total_money').text(total_money.toFixed(2))
      }
      
      
      //商品数量加减(这里我设定商品数量最小值为1，最大值为999)
      $('.goods_num_wrap').map((i,k)=>{
        // 数量减
        $(k).find('span').eq(0).click(function(){
          var num = $(this).next().val()
          num--
          num = num < 1 ? 1 :num
          $(this).next().val(num)
          calc()
        })
        // 数量加
        $(k).find('span').eq(1).click(function(){
          var num2 = $(this).prev().val()
          num2++
          num2 = num2 > 999 ? 999 : num2
          $(this).prev().val(num2)
          calc()
        })
        // 手动输入(这里可根据需要对输入的内容做正则验证)
        $(k).find('.goods_num').blur(function(){
          var num3 = $(k).find('.goods_num').val()
          num3 = num3>999?999:(num3<1?1:num3)
          $(k).find('.goods_num').val(num3)
          calc()
        })
      })

      // 全选
      $('.check_all').click(function(){
        if($(this).prop('checked') == true){
          $('.check_one').prop('checked',true)
          $('.check_all').prop('checked',true)
        }else{
          $('.check_one').prop('checked',false)
          $('.check_all').prop('checked',false)
        }
        calc()
      })

      // 反选
      $('.check_one').click(function(){
        var checked_num = 0
        $('.check_one').map((i,k)=>{
          if($(k).prop('checked') == true){
            checked_num++
          }
        })

        if(checked_num == $('.check_one').length){
          $('.check_all').prop('checked',true)
        }else{
          $('.check_all').prop('checked',false)
        }
        calc()
      })
    })
  </script>
</body>
</html>

希望这篇文章可以帮助到大家！有错误欢迎大家指出我们一起交流~啦啦啦

candy_tadecheng

关注

7
点赞
踩
46

收藏

觉得还不错? 一键收藏
2
评论
jquery实现购物车功能

用jquery写了一个简易版的购物车，没有店铺，也请忽略这粗糙的样式…效果如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia
复制链接

扫一扫