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

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

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


<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 = `
  
  • ${book.img}" alt="">
  • ${book.title}

  • ${book.author}
  • 价格:¥${book.price}
  • 销量: ${book.sales}
`
; $("#main").append(str); }); } ///底部选中效果:选项卡效果的话我就不写了.累了感觉不会再爱了♥ $("footer ul li").click(function () { $(this).css("color", "firebrick").siblings().css("color", ""); sortHandle("random"); });

页面效果:

jquery实现商品按价格排序、按销量排序、随机排序(基于sort()方法实现)_第1张图片

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

你可能感兴趣的:(jQuery,JavaScript)