定制开发jQuery购物车完整功能实现，全代码详解（有动态效果图）

 

目录

 

一、效果展示 ：

 二、定制开发主要功能介绍：

1、定制开发点击商品数量左右按钮定制开发能实现加减商品件数、定制开发当前商品后面"小计"(总价)定制开发的不断计算并变化

2、可以在"件数"定制开发中自定义输入商品件数，定制开发并自动计算该商品总价。

3、定制开发当商品点击左右按钮加减件数、定制开发在输入框中自定义输入定制开发件数的时候，定制开发能在下方的总计列中显定制开发示所有商品的件数、定制开发所有商品的价格。

4、定制开发点击全选按钮能将所有定制开发商品前面的复选框选中，定制开发再点击又全不选中。

5、定制开发点击每个商品前面的复选框按钮，定制开发如果所有商品全部选中，定制开发自动将全选按钮赋值为选中状态。

6、在所有商品全部选中状态下，取消一个商品的选中状态，全选按钮自动赋值为不选中状态。

7、点击后面每个商品的"删除"按钮能删除当前商品。

8、商品选中状态下（几个或全选），点击左下方的”删除“按钮能批量删除所选商品。

9、如果当前商品前面的复选框处于选中状态，就给他添加一个类，让他的背景颜色更加突出；如果变为非选中状态，删除他刚添加的类，让其恢复到原有的背景色。

10、在商品增加、删除、修改时都能自动的在最下方列总计的  总件数 和 总价 修改 

三、html代码：

这一部分不是重点，重点是学习jQuery，所以不太讲究过于精美，望各位不要介意~

这一部分，注意关注结构和类名，以便于后面的学习！

  1. <body>
  2.     <div class="container w">
  3.         <div class="row">
  4.             <nav>
  5.                 <ul>
  6.                     <li>首页</li>
  7.                     <li>服装</li>
  8.                     <li>手机</li>
  9.                     <li>电脑</li>
  10.                     <li>日用</li>
  11.                     <li>注册</li>
  12.                     <li>登录</li>
  13.                 </ul>
  14.             </nav>
  15.         </div>
  16.         <div class="row w">
  17.             <div class="cart-head">
  18.                 <div class="select-all">
  19.                     <input type="checkbox" name="" id=""> 全选
  20.                 </div>
  21.                 <div class="commodity">商品</div>
  22.                 <div class="price">价格</div>
  23.                 <div class="num">数量</div>
  24.                 <div class="sum">小计</div>
  25.                 <div class="operation">操作</div>
  26.             </div>
  27.         </div>
  28.         <!-- 商品详细模块 -->
  29.         <div class="row w">
  30.             <div class="cart-content">
  31.                 <div class="item">
  32.                     <input type="checkbox" name="" id="checkbox">
  33.                     <div class="box">
  34.                         <img src="images/1.jpg" alt="">
  35.                         <p>月亮与六便士正版书籍 毛姆经典作品青少 世界经典文学名著书籍畅销书排行榜</p>
  36.                     </div>
  37.                     <div class="item-price">￥12.60</div>
  38.                     <div class="item-num">
  39.                         <span class="left">-</span>
  40.                         <input type="text" value="1" class="nums">
  41.                         <span class="right">+</span>
  42.                     </div>
  43.                     <div class="item-sum">￥12.60</div>
  44.                     <div class="item-opration">删除</div>
  45.                 </div>
  46.                 <div class="item">
  47.                     <input type="checkbox" name="" id="checkbox">
  48.                     <div class="box">
  49.                         <img src="images/2.jpg" alt="">
  50.                         <p>月亮与六便士正版书籍 毛姆经典作品青少 世界经典文学名著书籍畅销书排行榜</p>
  51.                     </div>
  52.                     <div class="item-price">￥25.80</div>
  53.                     <div class="item-num">
  54.                         <span class="left">-</span>
  55.                         <input type="text" value="1" class="nums">
  56.                         <span class="right">+</span>
  57.                     </div>
  58.                     <div class="item-sum">￥25.80</div>
  59.                     <div class="item-opration">删除</div>
  60.                 </div>
  61.                 <div class="item">
  62.                     <input type="checkbox" name="" id="checkbox">
  63.                     <div class="box">
  64.                         <img src="images/3.jpg" alt="">
  65.                         <p>月亮与六便士正版书籍 毛姆经典作品青少 世界经典文学名著书籍畅销书排行榜</p>
  66.                     </div>
  67.                     <div class="item-price">￥32.10</div>
  68.                     <div class="item-num">
  69.                         <span class="left">-</span>
  70.                         <input type="text" value="1" class="nums">
  71.                         <span class="right">+</span>
  72.                     </div>
  73.                     <div class="item-sum">￥32.10</div>
  74.                     <div class="item-opration">删除</div>
  75.                 </div>
  76.                 <div class="item">
  77.                     <input type="checkbox" name="" id="checkbox">
  78.                     <div class="box">
  79.                         <img src="images/4.jpg" alt="">
  80.                         <p>月亮与六便士正版书籍 毛姆经典作品青少 世界经典文学名著书籍畅销书排行榜</p>
  81.                     </div>
  82.                     <div class="item-price">￥22.40</div>
  83.                     <div class="item-num">
  84.                         <span class="left">-</span>
  85.                         <input type="text" value="1" class="nums">
  86.                         <span class="right">+</span>
  87.                     </div>
  88.                     <div class="item-sum">￥22.40</div>
  89.                     <div class="item-opration">删除</div>
  90.                 </div>
  91.  
  92.             </div>
  93.         </div>
  94.         <!-- 商品总计 -->
  95.         <div class="row w">
  96.             <div class="cart-footer">
  97.                 <!-- 全选 -->
  98.                 <div class="select-all">
  99.                     <input type="checkbox" name="" id="">
  100.                     <span>全选</span>
  101.                 </div>
  102.                 <div class="footer-total">总计</div>
  103.                 <div class="footer-num">
  104.                     <span>1</span>
  105.                 </div>
  106.                 <div class="footer-sum">￥14.30</div>
  107.                 <div class="footer-opration">删除</div>
  108.             </div>
  109.         </div>
  110.  
  111.     </div>
  112.  
  113. </body>

四：css代码：

这一部分不是重点，自己练习写就可以~

  1. * {
  2.         margin: 0;
  3.         padding: 0;
  4.     }
  5.     /* nav */
  6.     
  7.     input {
  8.         outline: none;
  9.     }
  10.     
  11.     nav {
  12.         width: 1070px;
  13.         height: 80px;
  14.         background-color: #e9e6b8;
  15.         margin-bottom: 20px;
  16.         line-height: 80px;
  17.         padding: 0 40px;
  18.     }
  19.     
  20.     nav ul {
  21.         width: 1100px;
  22.     }
  23.     
  24.     nav ul li {
  25.         float: left;
  26.         list-style: none;
  27.         width: 170px;
  28.         height: 60px;
  29.         font-size: 20px;
  30.     }
  31.     
  32.     nav ul li:nth-child(6) {
  33.         margin-left: 60px;
  34.     }
  35.     
  36.     nav ul li:nth-child(6),
  37.     nav ul li:nth-child(7) {
  38.         width: 60px;
  39.         font-size: 16px;
  40.     }
  41.     
  42.     .current {
  43.         background-color: #e0dfd7;
  44.     }
  45.     /* 购物车主体 */
  46.     
  47.     div {
  48.         box-sizing: border-box;
  49.     }
  50.     
  51.     .cart-head {
  52.         width: 1070px;
  53.         height: 50px;
  54.         background-color: #eeeddd;
  55.         padding-top: 15px;
  56.         padding-left: 10px;
  57.     }
  58.     
  59.     .cart-head div,
  60.     .cart-head input {
  61.         float: left;
  62.     }
  63.     
  64.     .cart-head input[type=checkbox] {
  65.         margin-right: 3px;
  66.     }
  67.     
  68.     .commodity {
  69.         margin-left: 100px;
  70.     }
  71.     
  72.     .price {
  73.         margin-left: 300px;
  74.     }
  75.     
  76.     .num,
  77.     .sum,
  78.     .operation {
  79.         margin-left: 100px;
  80.     }
  81.     /* 商品内容模块 */
  82.     
  83.     .cart-content {
  84.         margin-top: 10px;
  85.     }
  86.     
  87.     .cart-content .item {
  88.         width: 1070px;
  89.         height: 200px;
  90.         border-top: 1px solid #ccc;
  91.         margin-bottom: 10px;
  92.         padding-left: 10px;
  93.     }
  94.     
  95.     .item .box {
  96.         float: left;
  97.         width: 300px;
  98.         height: 100px;
  99.         margin-left: 50px;
  100.         margin-top: 50px;
  101.     }
  102.     
  103.     .cart-content .item input {
  104.         display: block;
  105.         float: left;
  106.         margin-top: 90px;
  107.         background-color: #ccc;
  108.     }
  109.     
  110.     .item .box img {
  111.         width: 145px;
  112.         float: left;
  113.         margin-right: 5px;
  114.     }
  115.     
  116.     .item .box p {
  117.         text-indent: 2em;
  118.         width: 145px;
  119.         float: left;
  120.         font-size: 12px;
  121.     }
  122.     
  123.     .item>div {
  124.         float: left;
  125.         margin-top: 100px;
  126.     }
  127.     
  128.     .item-price {
  129.         margin-left: 107px;
  130.     }
  131.     
  132.     .item-num {
  133.         margin-left: 70px;
  134.     }
  135.     
  136.     .item-sum {
  137.         margin-left: 72px;
  138.     }
  139.     
  140.     .item-opration {
  141.         margin-left: 90px;
  142.     }
  143.     
  144.     .item-num span {
  145.         display: block;
  146.         width: 15px;
  147.         height: 20px;
  148.         float: left;
  149.         border: 1px solid #ccc;
  150.         margin-top: 0px;
  151.         text-align: center;
  152.         line-height: 17px;
  153.     }
  154.     
  155.     .item .item-num .nums {
  156.         float: left;
  157.         width: 35px;
  158.         height: 20px;
  159.         border: 1px solid #ccc;
  160.         text-align: center;
  161.         font-size: 12px;
  162.         line-height: 20px;
  163.         margin-top: 0;
  164.     }
  165.     /* 总计 */
  166.     
  167.     .cart-footer {
  168.         width: 1070px;
  169.         height: 100px;
  170.         background-color: #eeeddd;
  171.         line-height: 90px;
  172.         padding-left: 10px;
  173.     }
  174.     
  175.     .cart-footer .select-all input {
  176.         vertical-align: middle;
  177.         margin-top: -2px;
  178.     }
  179.     
  180.     .cart-footer .select-all span {
  181.         vertical-align: middle;
  182.         display: inline-block;
  183.     }
  184.     
  185.     .cart-footer>div {
  186.         float: left;
  187.         line-height: 100px;
  188.     }
  189.     
  190.     .footer-total {
  191.         margin-left: 435px;
  192.     }
  193.     
  194.     .footer-price {
  195.         margin-left: 70px;
  196.     }
  197.     
  198.     .footer-num {
  199.         margin-left: 105px;
  200.     }
  201.     
  202.     .footer-sum {
  203.         margin-left: 95px;
  204.     }
  205.     
  206.     .footer-opration {
  207.         margin-left: 95px;
  208.     }
  209.     
  210.     .w {
  211.         width: 1070px!important;
  212.     }

五、核心步骤：

在看jquery代码的前面或过程中可以看一下步骤的分析，对代码的理解特别有帮助！

 

 

 

 

 

 

 

六、jQuery代码（重点）

我写的注释特别详细，特别多，在这我也就不啰嗦了，大伙有我写的不清楚的或不太完美的，希望各位多多指教~

  1. $(function() {
  2.     // 给nav导航栏中的li添加悬浮变字体颜色的效果（完全可以不用做）
  3.     $("nav li").stop().mouseenter(function() {
  4.         $(this).css('color', 'red');
  5.     }).stop().mouseleave(function() {
  6.         $(this).css('color', '#000');
  7.     })
  8.     getPriceSum();
  9.     // 让全选按钮的checked属性的状态和所有item的复选框状态一致
  10.     // checked属性改变之后触发
  11.     $(".select-all input").change(function() {
  12.         // 获取它的状态，给所有的item里面的复选框赋值
  13.         var check = $(this).prop('checked');
  14.         // 让每个小项目和全选按钮同时改变值,否则点击最上面全选按钮，最下面全选按钮选不上
  15.         $(".item input,.select-all input").prop('checked', check);
  16.         // 当全选按钮发生改变，如果是选中状态给所有的item加current类
  17.         if (check) {
  18.             $('.item').addClass('current');
  19.         } else {
  20.             $('.item').removeClass('current');
  21.         }
  22.     });
  23.     // 点击下面每个项目中的复选框，如果复选框都选上了，让上面下面的全选按钮也选上；
  24.     // 如果没都选上，就让全选按钮处于没选中状态。
  25.     $(".item input").change(function() {
  26.         // 如果所有item中复选框被选中的数目等于总数，就让让全选按钮也选上
  27.         // $(".item input:checked")：被选中的个数，但他是以伪元素形式输出，再加上.length即可
  28.         if ($(".item input:checked").length == $(".item").length) {
  29.             $(".select-all input").prop('checked', true);
  30.         } else if ($(".item input:checked").length < $(".item").length) {
  31.             $(".select-all input").prop('checked', false);
  32.         }
  33.         // 当点击每个item前面的复选框按钮时，如果是选中状态就添加current类
  34.         var check = $(this).prop('checked');
  35.         if (check) {
  36.             $(this).parents('.item').addClass('current');
  37.         } else {
  38.             $(this).parents('.item').removeClass('current');
  39.         }
  40.     });
  41.     // 增加商品数量模块，点击加号时，让当前商品数量++
  42.     $(".item .right").click(function() {
  43.         var num = $(this).siblings('.nums').val();
  44.         num++;
  45.         $(this).siblings('.nums').val(num);
  46.         // 点击右侧按钮时候，当前的商品后面的小计也要做相应的改变
  47.         // 把价格中的数字截取出来*数目，再赋值给小计，赋值时+"￥"。
  48.         var price = $(this).parents('.item-num').siblings('.item-price').text().substr(1);
  49.         // 计算结果，保留两位小数
  50.         var sum = (price * num).toFixed(2);
  51.         // 给他爹的兄弟赋值
  52.         $(this).parents('.item-num').siblings('.item-sum').text("￥" + sum);
  53.         getsum();
  54.         getPriceSum();
  55.     });
  56.     // 减少商品，当点击左按钮时，先获取再--，最后赋值；到了1就不能再减了。
  57.     $(".item .left").click(function() {
  58.         var num = $(this).siblings('.nums').val();
  59.         if (num <= 1) {
  60.             return false;
  61.         }
  62.         num--;
  63.         $(this).siblings('.nums').val(num);
  64.         // 点击左侧按钮时候，当前的商品后面的小计也要做相应的改变
  65.         // 把价格中的数字截取出来*数目，再赋值给小计，赋值时+"￥"。
  66.         var price = $(this).parents('.item-num').siblings('.item-price').text().substr(1);
  67.         // 计算结果，保留两位小数
  68.         var sum = (price * num).toFixed(2);
  69.         // 给他爹的兄弟赋值
  70.         $(this).parents('.item-num').siblings('.item-sum').text("￥" + sum);
  71.         getsum();
  72.         getPriceSum();
  73.  
  74.     });
  75.     // 当用户在input件数，输入框中自定义输入数字时，也要修改小计
  76.     $(".item .nums").change(function() {
  77.             var num = $(this).val();
  78.             // 如果输入的数值小于1,先给它赋值为1,并把总价格赋值为单价
  79.             if (num < 1) {
  80.                 $(this).val(1);
  81.                 // 获取当前价格
  82.                 var price = $(this).parents('.item-num').siblings('.item-price').text().substr(1);
  83.                 // 给item后面的总价赋值.toFixed()方法前面必须是数字类型的才行
  84.                 price = parseFloat(price);
  85.                 $(this).parents('.item-num').siblings('.item-sum').text("￥" + (price).toFixed(2));
  86.                 getsum();
  87.                 getPriceSum();
  88.                 return false;
  89.             }
  90.             // 获取价格值
  91.             var price = $(this).parents('.item-num').siblings('.item-price').text().substr(1);
  92.             // 计算结果，保留两位小数
  93.             var sum = (price * num).toFixed(2);
  94.             // 给他爹的兄弟赋值
  95.             $(this).parents('.item-num').siblings('.item-sum').text("￥" + sum);
  96.             getsum();
  97.             getPriceSum();
  98.         })
  99.         // 计算总计，当点击加号或减号，或更改input文本框时触发，因多次使用所以封装函数
  100.     function getsum() {
  101.         var sum = 0;
  102.         $(".item .nums").each(function(i, domele) {
  103.                 var num = 0;
  104.                 // $(domele).val()是字符型，需要转化为数值型
  105.                 num = parseInt($(domele).val());
  106.                 sum += num;
  107.  
  108.             })
  109.             // 给总计里面的数目赋值
  110.         $(".footer-num span").text(sum);
  111.     }
  112.     // 计算总额,先获取当前item的商品数目*当前item的价格，再遍历相加，最后赋值，因多次使用所以封装函数
  113.     function getPriceSum() {
  114.         var priceSum = 0;
  115.         $(".item .nums").each(function(i, domele) {
  116.             // 获取当前元素的件数
  117.             var num = parseInt($(domele).val());
  118.             // 获取当前元素的价格
  119.             var price = parseFloat($(this).parents('.item-num').siblings('.item-price').text().substr(1));
  120.             priceSum += (num * price);
  121.  
  122.         })
  123.         priceSum = priceSum.toFixed(2);
  124.         // 给总价赋值
  125.         $(".footer-sum").text('￥' + priceSum);
  126.  
  127.     }
  128.     // 用户点击每个item后面的删除按钮时，删除当前item
  129.     $(".item .item-opration").click(function() {
  130.             $(this).parents(".item").remove();
  131.             isChecked();
  132.             getPriceSum();
  133.             getsum();
  134.         })
  135.         // 当点击footer里面的删除时，删除勾选前面复选框的item
  136.     $(" .footer-opration").click(function() {
  137.             // 判断每个item前面的复选框是否被选中，如果选中删除他所对应的item即可
  138.             $(".item #checkbox:checked").parents(".item").remove();
  139.             isChecked();
  140.             getPriceSum();
  141.             getsum();
  142.  
  143.         })
  144.         // 如果内容区域的item的数目等于0，就取消全选按钮的选中状态
  145.     isChecked();
  146.  
  147.     function isChecked() {
  148.         if ($(".item").length == 0) {
  149.             $(".select-all input").prop('checked', false);
  150.         }
  151.     }
  152.  
  153.  
  154.  
  155. })

七、感谢

最后一直都是跟着的pink老师学习的，黑马很好，希望大家多多支持他！

 

 

 

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发