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

最新推荐文章于 2022-02-21 21:51:30 发布

你的玄烨

最新推荐文章于 2022-02-21 21:51:30 发布

阅读量4.4k

点赞数 4

分类专栏： jQuery JavaScript 文章标签： jquery js 前端

本文链接：https://blog.csdn.net/CCQStudy/article/details/107115322

版权

JavaScript 同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

jQuery

4 篇文章 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">
            <!-- <ul class="bookshow">
                <li><img src="imgtest/kris.jpg" alt=""></li>
                <li>
                    <p>东野圭吾：七年守护</p>
                </li>
                <li>
                    <font>(日)东野圭吾著：</font>
                </li>
                <li>价格：￥<span>29.5</span></li>
                <li>
                    <font>销量:</font>
                    <font>94</font>
                </li>
            </ul>
            -->
        </div>
        <!--页面底部-->
        <footer>
            <ul>
                <li class="iconfont">&#xe63c;</li>
                <li class="iconfont">&#xe686;</li>
                <li class="iconfont">&#xe501;</li>
                <li class="iconfont">&#xe51b;</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");
});

页面效果：

在这里插入图片描述

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

你的玄烨

关注

4
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
jquery实现商品按价格排序、按销量排序、随机排序(基于sort（）方法实现)

前言：三部分代码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><
复制链接

扫一扫