html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>案例：计算商品价格</title>
  6.     <!-- IMPORT CSS -->
  7.     <link rel="stylesheet" type="text/css" href="price.css" />
  8. </head>
  9. <body>
  10.     <div class="wrap">
  11.         <div class="box">
  12.             <ul class="list">
  13.                 <!-- <li>
  14.                     <i></i>
  15.                     <em>0</em>
  16.                     <i></i>
  17.                     <span>
  18.                         单价：<strong>12.5元</strong>
  19.                         小计：<strong>0元</strong>
  20.                     </span>
  21.                 </li> -->
  22.             </ul>
  23.             <div class="info">
  24.                 <!-- <span>商品公合计：<em>0</em>件</span>
  25.                 <span>共花费了：<em>0</em>元</span>
  26.                 <span>其中最贵的商品单价是：<em>0</em>元</span> -->
  27.             </div>
  28.         </div>
  29.     </div>
  30.     <!-- IMPORT JS -->
  31.     <script src="../node_modules/jquery/dist/jquery.min.js"></script>
  32.     <script src="index.js"></script>
  33. </body>
  34. </html>

css

  1. body,
  2. ul,
  3. li {
  4.     margin: 0;
  5.     padding: 0;
  6.     list-style: none;
  7. }
  8. .wrap {
  9.     margin: 0 auto;
  10.     width: 764px;
  11.     display: flex;
  12. }
  13. .wrap .box {
  14.     position: relative;
  15.     width: 479px;
  16.     height: 591px;
  17.     background: url(bg1.png) no-repeat center center;
  18. }
  19. .wrap .box .list {
  20.     position: absolute;
  21.     left: 0;
  22.     top: 90px;
  23.     width: 100%;
  24. }
  25. .wrap .box .list li {
  26.     box-sizing: border-box;
  27.     margin-bottom: 18px;
  28.     padding-left: 44px;
  29.     height: 44px;
  30.     overflow: hidden;
  31. }
  32. .wrap .box .list li i {
  33.     float: left;
  34.     margin-right: 10px;
  35.     width: 52px;
  36.     height: 44px;
  37.     cursor: pointer;
  38. }
  39. .wrap .box .list li i:nth-of-type(1) {
  40.     background: url(sub.png) no-repeat center center;
  41. }
  42. .wrap .box .list li i:nth-of-type(2) {
  43.     background: url(add.png) no-repeat center center;
  44. }
  45. .wrap .box .list li em {
  46.     width: 44px;
  47.     height: 36px;
  48.     float: left;
  49.     background: #fff;
  50.     border-radius: 5px;
  51.     font: 16px/36px arial;
  52.     text-align: center;
  53.     margin-right: 10px;
  54. }
  55. .wrap .box .list li span {
  56.     box-sizing: border-box;
  57.     float: left;
  58.     margin-left: 10px;
  59.     padding-left: 3px;
  60.     width: 214px;
  61.     height: 36px;
  62.     line-height: 36px;
  63.     border-radius: 5px;
  64.     background: #171818;
  65.     color: #878787;
  66.     font-size: 14px;
  67. }
  68. .wrap .box .list li span strong {
  69.     margin-right: 10px;
  70. }
  71. .info {
  72.     width: 100%;
  73.     height: 140px;
  74.     position: absolute;
  75.     left: 0;
  76.     bottom: 0;
  77.     color: #878787;
  78.     box-sizing: border-box;
  79.     padding: 20px 0 0 42px;
  80. }
  81. .info em {
  82.     width: 46px;
  83.     height: 36px;
  84.     display: inline-block;
  85.     background: #fff;
  86.     border-radius: 5px;
  87.     font: 16px/36px arial;
  88.     text-align: center;
  89.     margin: 0 10px 0;
  90. }
  91. .info span:nth-of-type(2) em {
  92.     width: 66px;
  93. }
  94. .info span:nth-of-type(3) em {
  95.     width: 66px;
  96. }
  97. .info span:nth-of-type(1) {
  98.     margin-right: 20px;
  99. }

js：操作dom方式

  1. // 操作dom方式
  2. let cartModule = (function ($) {
  3.     let $btns = $('.list i'),
  4.         $counts = $('.list em'),
  5.         $strongs = $('.list strong'),
  6.         $ems = $('.info em');
  7.     // 实现加号减号的点击事件
  8.     function handleClick() {
  9.         $btns.click(function () {
  10.             let $this = $(this),
  11.                 n = $this.index(); // JQ 中的 INDEX 获取的是元素在兄弟结构中的索引
  12.             // 根据点击按钮，获取当前行中：存储数字、单价、总价这几个元素
  13.             let $par = $this.parent(),
  14.                 $count = $par.children('em'),
  15.                 $strongs = $par.find('strong'),
  16.                 $price = $strongs.eq(0), // eq 获取的依然是 JQ 对象,get 获取的是 JS 对象
  17.                 $total = $strongs.eq(1);
  18.             // 0减号 2加号 根据点击的加减号，计算出最新购买的数量
  19.             let x = parseFloat($count.html());
  20.             if (n === 0) {
  21.                 x--;
  22.                 x < 0 ? x = 0 : null;
  23.             } else {
  24.                 x++;
  25.                 x > 10 ? x = 10 : null;
  26.             }
  27.             $count.html(x);
  28.             // 获取单价计算总价
  29.             $total.html(parseFloat($price.html()) * x + '元');
  30.             // 计算总信息
  31.             computed();
  32.         });
  33.     }
  35.     // 计算总信息
  36.     function computed () {
  37.         let allCount = 0,
  38.             allMoney = 0,
  39.             allPrice = [];
  40.         // 计算总购买数
  41.         $counts.each((index, item) => {
  42.             allCount += parseFloat($(item).html());
  43.         });
  44.         $ems.eq(0).html(allCount);
  45.         // 计算总价格和最高单价
  46.         $strongs.each((index, item) => {
  47.             let itemVal = parseFloat($(item).html());
  48.             if (index % 2 === 1) {
  49.                 allMoney += itemVal;
  50.             } else {
  51.                 // 只有购买了才进入比较的序列
  52.                 if (parseFloat($(item).next('strong').html()) !== 0) {
  53.                     allPrice.push(itemVal);
  54.                 }
  55.             }
  56.         });
  57.         $ems.eq(1).html(allMoney);
  58.         $ems.eq(2).html(Math.max(...allPrice));
  59.     }
  61.     return {
  62.         init() { // init:function(){}
  63.             handleClick();
  64.         }
  65.     }
  66. })(jQuery);
  68. cartModule.init();

数据驱动.png

js：操作数据模式

  1. let cartModule = (function ($) {
  2.     let $list = $('.list'),
  3.         $info = $('.info'),
  4.         $btns = null;
  5.     // 准备数据模型（页面就是按照数据模型渲染出来的）
  6.     let _DATA = [{
  7.         id: 1,
  8.         count: 0,
  9.         price: 12.5,
  10.         total: 0
  11.     }, {
  12.         id: 2,
  13.         count: 0,
  14.         price: 10.5,
  15.         total: 0
  16.     }, {
  17.         id: 3,
  18.         count: 0,
  19.         price: 8.5,
  20.         total: 0
  21.     }, {
  22.         id: 4,
  23.         count: 0,
  24.         price: 8,
  25.         total: 0
  26.     }, {
  27.         id: 5,
  28.         count: 0,
  29.         price: 14.5,
  30.         total: 0
  31.     }];
  33.     // render:按照数据模型渲染视图
  34.     function render() {
  35.         // 渲染操作区域视图
  36.         let str = ``;
  37.         $.each(_DATA, (index, item) => {
  38.             let {count, price, total, id} = item;
  39.             str += `<li>
  40.                 <i group="${id}"></i>
  41.                 <em>${count}</em>
  42.                 <i group="${id}"></i>
  43.                 <span>
  44.                     单价：<strong>${price}元</strong>
  45.                     小计：<strong>${total}元</strong>
  46.                 </span>
  47.             </li>`;
  48.         });
  49.         $list.html(str);
  50.         // 渲染总计信息区视图
  51.         let counts = 0,
  52.             totals = 0,
  53.             maxprice = 0;
  54.         _DATA.forEach(item => {
  55.             counts += item.count;
  56.             totals += item.total;
  57.             // 购买才进入最高价格的计算
  58.             if (item.count > 0) {
  59.                 maxprice < item.price ? maxprice = item.price : null;
  60.             }
  61.         });
  62.         $info.html(`<span>商品公合计：<em>${counts}</em>件</span>
  63.                     <span>共花费了：<em>${totals}</em>元</span>
  64.                     <span>其中最贵的商品单价是：<em>${maxprice}</em>元</span>`);
  65.         // 执行事件绑定
  66.         handle();
  67.     }
  69.     // handle:点击按钮操作（不操作 DOM，只改变 _DATA 的数据）
  70.     function handle() {
  71.         $btns = $list.find('i');
  72.         $btns.click(function () {
  73.             let $this = $(this),
  74.                 n = $this.index(),
  75.                 group = parseFloat($this.attr('group'));
  76.             // 修改数据
  77.             _DATA = _DATA.map(item => {
  78.                 if (item.id === group) {
  79.                     if (n === 0) {
  80.                         item.count--;
  81.                         item.count < 0 ? item.count = 0 : null;
  82.                     } else {
  83.                         item.count++;
  84.                         item.count > 10 ? item.count = 10 : null;
  85.                     }
  86.                     item.total = item.price * item.count;
  87.                 }
  88.                 return item;
  89.             });
  90.             // 重新渲染
  91.             render();
  92.         });
  93.     }
  95.     return {
  96.         init() {
  97.             render();
  98.         }
  99.     }
  100. })(jQuery);
  102. cartModule.init();

图片资源

add.pngbg1.pngsub.png