jquery实现商品按价格排序、按销量排序、随机排序(基于sort（）方法实现)

秒速五厘米 2023-02-22 13:36 19阅读 0赞

**前言：** 三部分代码Ctrl C + V，一定可以实现效果。

**部分一：** 页面设计 ( **注：** 底部导航栏用到了阿里的字体图标)

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="fonti/iconfont.css"> 
    </head>
    <body>
        
        <div id="all">
            
            <header>
                <button class="bt1" onclick="sortHandle('random')">随机</button>
                <button class="bt2" onclick="sortHandle('price')">价格</button>
                <button class="bt3" onclick="sortHandle('sales')">销量</button>
            </header>
            
            <div id="main">
                
            </div>
            
            <footer>
                <ul>
                    <li class="iconfont"></li>
                    <li class="iconfont"></li>
                    <li class="iconfont"></li>
                    <li class="iconfont"></li>
                    
                </ul>
            </footer>
        </div>
        <script src="js/jquery-1.10.1.min.js"></script>
        <script src="js/myself.js"></script>
        </script>
    </body>
    </html>

**部分二：** 样式部分main.css

/*通用部分*/
    li { 
      list-style: none;
    }
    
    /*页面主体*/
    #all { 
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      overflow-y: visible;
    }
    /*页面头部*/
    header { 
      width: 100%;
      height: 8%;
    }
    header button { 
      width: 80px;
      height: 30px;
      margin: 1% 0 0 1%;
      background-color: firebrick;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
    /*页面主要内容区*/
    #main { 
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      padding-bottom: 5%;
    }
    #main ul { 
      width: 16%;
      margin-left: 1%;
    }
    #main ul li { 
      width: 80%;
    }
    #main ul li img { 
      width: 150px;
    }
    #main ul li p { 
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 18px;
    }
    #main ul li font { 
      color: gray;
      font-size: 12px;
    }
    #main ul li:nth-child(2) { 
      margin-top: -8%;
    }
    #main ul li:nth-child(3) { 
      margin-top: -8%;
    }
    #main ul li:nth-child(4) { 
      color: red;
    }
    /*页面底部*/
    footer { 
      width: 100%;
      height: 10%;
      position: fixed;
      bottom: 0px;
      background-color: white;
    }
    footer ul li { 
      float: left;
      margin-left: 18%;
      font-size: 36px !important;
      cursor: pointer;
    }

**部分三：** 逻辑实现，myself.js

//定义一个全局数组，用来存取我们从接口上获取的数据
    var books = [];
    //用来标记按价格排序按钮的点击次数
    var p = 0;
    //用来标记按销量排序的按钮的点击次数
    var s = 0;
    
    //页面初始化，默认顺序加载显示数据。并将从接口获取到的数据赋值给数组
    $(function () { 
      $.getJSON("http://api.cat-shop.penkuoer.com/books.json", function (data) { 
        books = data;
        initHtml(data);
      });
    });
    
    //基于sort()方法排序实现对应条件排序
    function sortHandle(type) { 
      switch (type) { 
        //随机排序
        case "random":
          //Math.random()随机取值是0-1；
          //Math.random() - 0.5的取值可能为正，也可能为负
          books.sort(function (a, b) { 
            $("#main").empty();
            return Math.random() - 0.5;
          });
          break;
        //按价格排序
        case "price":
          //每点击一次，p自增一次
          p++;
          $("#main").empty();
          //点一次升序，再点一次降序（按价格排序同理）
          if (p % 2 == 0) { 
            books.sort((a, b) => a.price - b.price);
          } else { 
            books.sort((a, b) => b.price - a.price);
          }
          break;
        //按销量排序
        case "sales":
          s++;
          $("#main").empty();
          if (s % 2 == 0) { 
            books.sort((a, b) => a.sales - b.sales);
          } else { 
            books.sort((a, b) => b.sales - a.sales);
          }
          break;
        default:
          break;
      }
      initHtml();
    }
    
    /*往页面添加数据 */
    function initHtml() { 
      var str = "";
      books.forEach(function (book) { 
        //以字符串模板的形式，遍历数组数据插入页面容器
        str = ` <ul class="bookshow"> <li><img src="${ book.img}" alt=""></li> <li> <p>${ book.title}</p> </li> <li> <font>${ book.author}</font> </li> <li>价格：￥<span>${ book.price}</span></li> <li> <font>销量:</font> <font>${ book.sales}</font> </li> </ul> `;
        $("#main").append(str);
      });
    }
    
    ///底部选中效果：选项卡效果的话我就不写了.累了感觉不会再爱了♥
    $("footer ul li").click(function () { 
      $(this).css("color", "firebrick").siblings().css("color", "");
      sortHandle("random");
    });

**页面效果：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70]

**结语：** 我觉得逻辑实现部分，代码注释已经很详细了，就没有撰写那么多的文字叙述。  
如果还有疑惑，请联系我。**WeChat：CHEN1070036402**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020070321132988.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5,size_16,color_FFFFFF,t_70