在开发中经常会遇到需要对数据进行排序的操作:比如
- 成绩管理
- 商品的销量
- 商品的价格
等等,我们以商品的排序为例
把商品数据,点击相应的排序按钮,进行对应的排序
以下是详细的代码,很全面,css需要自己完成哦
// 这个引入的是字体图标
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1908632_8cywyvtzrb.css">
<body>
<div id="bigBox">
<header>
// 按钮列表
<ul>
<!-- 事件的调用执行可以直接写在标签内,在外面定义函数功能 -->
<li class="Random" onclick="sortHandle('r')">随机</li>
<li class="price" onclick="sortHandle('p')">价格</li>
<li class="sales" onclick="sortHandle('s')">销量</li>
</ul>
</header>
<div id="main">
// 内容区
<div class="con">
<ul class="goodsList"></ul>
</div>
</div>
// 底部导航
<footer>
<div>
<span class="iconfont icon-home"></span>
首页
</div>
<div class="textColor">
<span class="iconfont icon-wangge"></span>
热卖
</div>
<div>
<span class="iconfont icon-gouwuche"></span>
购物车
</div>
<div>
<span class="iconfont icon-renkou"></span>
我的
</div>
</footer>
</body>
// 引入jquery
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script>
// 声明一个全局数组,用来接受请求回来的数据
var book = [];
// 定义一个函数,做数据结构的拼接
function init(){
var str = "";
book.forEach(function (res) {
str += `<li class="smallGoods">
<a class="smallGoods-img" href="#">
<img src="${res.img}" alt="">
</a>
<a class="goods-name" href="#">${res.title}</a>
<span>价格:¥</span>
<span class="goodsPrice">${res.price}</span><br>
<em>销量:</em>
<em>${res.sales}</em>
</li>`;
});
$(".goodsList").html(str);
}
// 点击排序的封装
function sortHandle(type){
switch(type){
// 随机排序
case "r":
book.sort(function(m,n){
return Math.random() - 0.5;
});
break;
// 按价格排序
case "p":
book.sort(function(m,n){
return m.price - n.price;
});
break;
// 按销量排序
case "s":
book.sort(function(m,n){
return n.sales - m.sales;
});
break;
}
// 执行拼接函数
init();
}
// 请求数据
$(function(){
$.get("自己要请求的数据接口,按需修改结构",function (data) {
// 把请求回来的数据赋值给定义的全局数组
book = data;
init();
});
});
</script>