商城排序

HTML 代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>珠峰培训-商品排序</title>
  6.     <!--import css-->
  7.     <link rel="stylesheet" href="css/reset.min.css"/>
  8.     <link rel="stylesheet" href="css/index.css"/>
  9. </head>
  10. <body>
  11. <div class="container">
  12.     <!--HEADER-->
  13.     <div class="header clear" id="header">
  14.         <span>排序：</span>
  15.         <a href="javascript:;">上架时间</a>
  16.         <a href="javascript:;">价格</a>
  17.         <a href="javascript:;">热度</a>
  18.     </div>
  20.     <!--LIST-->
  21.     <ul class="list clear" id="list">
  22.         <li><a href="javascript:;">
  23.             <img src="img/1.jpg" alt="">
  24.             <p>HUAWEI Mate 10 4GB+64GB 全网通版（亮黑色）</p>
  25.             <span>￥3899</span>
  26.         </a></li>
  27.     </ul>
  28. </div>
  30. <!--IMPORT JS-->
  31. <script src="js/index.js"></script>
  32. </body>
  33. </html>

CSS代码

  • 不含 reset.css 文件
  1. html, body {
  2.     width: 100%;
  3.     overflow-x: hidden;
  4.     background: #F4F4F4;
  5.     font-size: 14px;
  6.     color: #555;
  7. }
  9. .container {
  10.     margin: 20px auto;
  11.     width: 1200px;
  12.     overflow: hidden;
  13. }
  15. /*--HEADER--*/
  16. .header {
  17.     background: #FFF;
  18. }
  20. .header span {
  21.     float: left;
  22.     width: 90px;
  23.     line-height: 50px;
  24.     text-align: center;
  25. }
  27. .header a {
  28.     position: relative;
  29.     float: left;
  30.     padding: 0 15px;
  31.     line-height: 50px;
  32.     text-align: center;
  33.     color: #999;
  34. }
  36. .header a i {
  37.     position: absolute;
  38.     right: 3px;
  39.     top: 50%;
  40.     margin-top: -4px;
  41.     width: 0;
  42.     height: 0;
  43.     font-size: 0;
  44.     overflow: hidden;
  45.     border: 4px solid transparent;
  46. }
  48. .header a i.up {
  49.     margin-top: -9px;
  50.     border-bottom-color: #999;
  51. }
  53. .header a i.down {
  54.     margin-top: 1px;
  55.     border-top-color: #999;
  56. }
  58. .header a i.up.bg {
  59.     border-bottom-color: #E01D20;
  60. }
  62. .header a i.down.bg {
  63.     border-top-color: #E01D20;
  64. }
  66. .header a:hover {
  67.     color: #E01D20;
  68. }
  70. /*--LIST--*/
  71. .list {
  72.     width: 1205px;
  73.     margin-top: 20px;
  74. }
  76. .list li {
  77.     margin: 0 10px 10px 0;
  78.     float: left;
  79. }
  81. .list li a {
  82.     display: block;
  83.     padding: 0 16px;
  84.     width: 193px;
  85.     background: #FFF;
  86.     border: 3px solid transparent;
  87. }
  89. .list li a img {
  90.     display: block;
  91.     width: 100%;
  92. }
  94. .list li a p {
  95.     height: 40px;
  96.     line-height: 20px;
  97.     color: #999;
  98.     overflow: hidden;
  99. }
  101. .list li a span {
  102.     line-height: 40px;
  103.     color: #555;
  104. }
  106. .list li a:hover {
  107.     border: 3px solid #E01D20;
  108. }

JS代码

  1. 获取元素对象：
  1. // 获取元素
  2. let headerBox = document.getElementById('header'),
  3.   linkList = headerBox.getElementsByTagName('a'),
  4.   listBox = document.getElementById('list'),
  5.   productList = listBox.getElementsByTagName('li');
  1. 基于ajax获取数据
  1. let productData = null;
  2. let xhr = new XMLHttpRequest(); // 创建一个 ajax 实例对象
  3. xhr.open('GET', 'json/product.json', false); // 调用 xhr 的 open 方法
  4. xhr.onreadystatechange = function () {
  5.   // 监听 xhr 的 onreadystatechange 事件
  6.   if (xhr.readyState === 4 && xhr.status === 200) {
  7.     // 如果满足这个条件，就表示当前请求已经顺利完成
  8.     productData = xhr.responseText;
  9.   }
  10. };
  11. xhr.send(null); // 发送 ajax 请求
  1. 解析从服务端获取的数据
  1. productData = JSON.parse(productData);
  1. 数据绑定:基于我们从服务端获取的数据，把页面中需要的数据和 html 结构搞出来，最后把数据和 html 添加到页面中的指定容器中。
  1. let str = ``; // 模板字符串
  3. for (let i = 0; i < productData.length; i++) {
  4.   let item = productData[i];
  5.   // str 在这里还只是一个字符串，不能通过. 属性名的方式自定义属性
  6.   str += `<li data-price="${item.price}"
  7.               data-time="${item.time}"
  8.               data-hot="${item.hot}">
  9.             <a href="javascript:;">
  10.               <img src="${item.img}" alt="">
  11.               <p>${item.title}</p>
  12.               <span>￥${item.price}</span> <br>
  13.               <span>上架时间：${item.time}</span> <br>
  14.               <span>热度：${item.hot}</span>
  15.              </a>
  16.            </li>`
  17. }
  1. 把拼接好的 html 字符串插入到页面的指定容器中（这些拼接好的字符串在没有添加到页面中，再此之前还不是元素）
  1. listBox.innerHTML = str;
  1. 定义处理排序的方法
  1. let sortList = function (that, index) {
  2.   // 用来处理排序逻辑的方法
  4.   // 1. 根据 getElementsByTagName 获取的是一个元素集合，而元素集合是一个类数组，如果想调用 sort 进行排序，需要先将类数组转化成数组，数组中 li 并不是克隆出来的，而是原有类数组中元素对象对应的堆内存空间地址。
  5.   let productArr = [...productList];
  7.   // 2. 基于 sort 按照价格给 li 排序
  8.   productArr.sort((a, b) => {
  9.     // a 和 b 都是 li 元素对象，所以不能直接相减。
  10.     // 我们需要从 li 上面获取到价格
  12.     // let innerText = that.innerText;
  13.     let aInn, bInn;
  14.     let ary = ['data-time', 'data-price', 'data-hot'];
  16.     aInn = a.getAttribute(ary[index]);
  17.     bInn = b.getAttribute(ary[index]);
  18.     let reg = /-/g;
  19.     if (index === 0) {
  20.       aInn = aInn.replace(reg, '');
  21.       bInn = bInn.replace(reg, '')
  22.     }
  24.     // console.log(aInn, bInn);
  25.     return (aInn - bInn) * that.flag; // 排序时使用当前被点击的 a 标签私有的 flag
  26.   });
  1. productArr 排好序后页面中并没有按照价格排列，原因是我们还需要把排好序的 li 依次插入到 ul#list（id 为 list 的 ul）中
    for (let i = 0; i < productArr.length; i++) {
    listBox.appendChild(productArr[i]);
    }
    };

7.循环绑定点击事件

  1. for (let i = 0; i < linkList.length; i++) {
  2.   linkList[i].flag = -1; // 让每个a标签私有自己的flag，并且在排序时自己管理自己的
  4.   linkList[i].onclick = function () {
  5.     // 点击价格a标签的时候给li排序
  7.     // => 如果你点击某一个a标签的是，想让列表按照当前维度升序排序，就要保证当前a标签的flag是-1；所以我们点击当前a标签的时候，把其他两个a标签的flag重置成-1；
  8.     for (let j = 0; j < linkList.length; j++) {
  9.       if (linkList[j] !== this) {
  10.         // this是当前点击的a标签，!== this就是其他两个
  11.         linkList[j].flag = -1; // 重置非当前点击的a标签的flag
  12.       }
  13.     }
  16.     this.flag *= -1; // 给当前点击的a标签上的flag 乘以-1
  17.     sortList(this, i);
  18.   };
  19. }

【发上等愿，结中等缘，享下等福，择高处立，寻平处住，向宽处行】