把数据按照价格、销量、或随机排序

最新推荐文章于 2024-05-19 18:20:50 发布

得莱联盟

最新推荐文章于 2024-05-19 18:20:50 发布

阅读量953

点赞数

文章标签： js jquery

本文链接：https://blog.csdn.net/weixin_46579411/article/details/107028876

版权

在开发中经常会遇到需要对数据进行排序的操作：比如

成绩管理
商品的销量
商品的价格
等等，我们以商品的排序为例
把商品数据，点击相应的排序按钮，进行对应的排序
以下是详细的代码，很全面，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>

得莱联盟

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
把数据按照价格、销量、或随机排序

在开发中经常会遇到需要对数据进行排序的操作：比如成绩管理商品的销量商品的价格等等，我们以商品的排序为例把商品数据，点击相应的排序按钮，进行对应的排序以下是详细的代码，很全面，css需要自己完成哦// 这个引入的是字体图标<link rel="stylesheet" href="https://at.alicdn.com/t/font_1908632_8cywyvtzrb.css"><body> <div id="bigBox">
复制链接

扫一扫