JS实现商城排序

最新推荐文章于 2022-04-22 19:40:08 发布
最新推荐文章于 2022-04-22 19:40:08 发布
阅读量745 收藏 6
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38689395/article/details/110789510
版权

实现效果

  • 根据上架时间/热度/价格进行升序/降序排序
  • 上箭头亮代表升序，下箭头亮代表降序

效果图如下：
商城排序

渲染 li 标签

  • 获取 ul 以便让每一个 li 渲染到页面
var lists = document.querySelector(".lists");
var lis = null;

  • 把每一个 li 渲染到页面上

    这里为了操作方便，给每一个 li 绑定自定义属性，之后根据属性值获取其中内容 li.getAttribute(...) 即可

    如果不这样做，则需要通过 li.querySelector(...).innerText 获取

    注意：querySelectorAll 获取到的是类数组，因为需要进行排序，使用数组的 sort() 方法，所以需要用 [].slice.call() 或 Array.from 转换成数组

function Init(data) {
    let str = "";
    for (let i = 0; i < data.length; i++) {
        const el = data[i];
        str += `<li time="${el.time}" hot="${el.hot}" price="${el.price}">
        <img src="${el.img}" alt="">
        <p class="title">${el.title}</p>
        <p class="time">${el.time}</p>
        <p class="info">
            <span class="price">${el.price}</span>
            <span class="hot">${el.hot}</span>
        </p>
    </li>`;
    }
    lists.innerHTML = str;
    lis = [].slice.call(lists.querySelectorAll("li"));
}

点击 a 标签进行排序

  • 获取 a 标签
var links = document.querySelectorAll(".top a");

  • 给 a 标签添加鼠标点击事件

    为实现每次排序都是上一次的倒序，需要给每一个 a 标签添加一个自定义属性作为标志 links[i].flag = -1 ，flag 值为1代表升序，每次点击事件只需 flag 取反即可 this.flag *= -1

    注意： sort() 方法中回调函数 this 指向 window，所以需要用一个变量存储 this let that = this;

for (let i = 0; i < links.length; i++) {
    links[i].flag = -1;
    links[i].onclick = function () {
        this.flag *= -1;
        let that = this;
        let sortFlag = this.getAttribute("sortFlag");
        if (sortFlag == "time") {
            lis.sort(function (a, b) {
                return (a.getAttribute(sortFlag).replace(/-/g, "") - b.getAttribute(sortFlag).replace(/-/g, "")) * that.flag;
            });
        } else {
            lis.sort(function (a, b) {
                return (a.getAttribute(sortFlag) - b.getAttribute(sortFlag)) * that.flag;
            });
        }
        for (let i = 0; i < lis.length; i++) {
            lists.appendChild(lis[i])
        }
    };
}

点击 a 标签点亮排序箭头

  • 升/降序高亮对应箭头字体图标
let arrows = this.querySelectorAll("b");
let arrCur = document.querySelectorAll(".top b.current");
for (let i = 0; i < arrCur.length; i++) {
    arrCur[i].classList.remove("current");
}
if (this.flag == 1) {
    arrows[0].classList.add("current");
} else {
    arrows[1].classList.add("current");
}

优化

  • for 每进行一次循环都会引起浏览器的回流，非常耗性能
for (let i = 0; i < lis.length; i++) {
    lists.appendChild(lis[i]);
}

  • 可以使用 DocumentFragment 来创建一个新的空白的文档片段，把元素附加到这个文档片段中，之后通过这个文档片段附加到 DOM 树

    因为文档片段存在内存中，并不在 DOM 树中，所以将子元素插入到文档片段时不会引起页面回流。因此，使用文档片段会带来更好的性能

let frg = document.createDocumentFragment();
for (let i = 0; i < lis.length; i++) {
    frg.appendChild(lis[i]);
}
lists.appendChild(frg)
  • 如果希望点击完当前a标签，再点击其他a标签时都是升序排列的话，需要每次都将其他标签的flag设置为-1
for (let i = 0; i < links.length; i++) {
    if (links[i] != this) {
        links[i].flag = -1;
    }
}

完整代码

index.html（html+css）

  • 创建 index.html 文件，粘贴如下代码
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商城排序</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        body, html {
            background: lavender;
        }
        .main {
            width: 1185px;
            margin: 0 auto;
        }
        .main .topBar {
            height: 50px;
            background: #fff;
            display: flex;
            align-items: center;
            padding-left: 20px;
            box-sizing: border-box;
        }
        .main .shortBtn {
            display: flex;
            align-items: center;
            margin: 0 10px;
            color: blue;
        }
        .main .shortBtn .arrows {
            color: #333;
            display: flex;
            flex-direction: column;
            margin-left: 10px;
        }
        .main .shortBtn .iconfont {
            font-size: 14px;
        }
        .shortBtn:hover>span {
            color: red;
        }
        .lists {
            display: flex;
            flex-wrap: wrap;
        }
        .lists li {
            margin-top: 20px;
            width: 225px;
            background: #fff;
            padding: 20px;
            box-sizing: border-box;
            font-size: 14px;
            margin-right: 15px;
            line-height: 30px;
        }
        .lists li:nth-child(5n){
            margin-right: 0;
        }
        .lists li img {
            width: 140px;
            display: block;
            margin: 0 auto;
        }
        .lists li .numInfo {
            display: flex;
            justify-content: space-between;
        }
        .arrowUp {
            border: 5px solid #333;
            margin-bottom: 10px;
            border-color: transparent transparent #333 transparent;
        }
        .arrowUp.current {
            border-color: transparent transparent red transparent;
        }
        .arrowDown {
            border: 5px solid #333;
            border-color: #333 transparent transparent transparent;
        }
        .arrowDown.current {
            border-color: red transparent transparent transparent;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="topBar">
            <span>排序</span>
            <a href="javascript:;" class="shortBtn" sortFlag="time">
                <span>上架时间</span>
                <div class="arrows">
                    <b class="arrowUp"></b>
                    <b class="arrowDown"></b>
                </div>
            </a>
            <a href="javascript:;" class="shortBtn" sortFlag="hot">
                <span>热度</span>
                <div class="arrows">
                    <b class="arrowUp"></b>
                    <b class="arrowDown"></b>
                </div>
            </a>
            <a href="javascript:;" class="shortBtn" sortFlag="price">
                <span>价格</span>
                <div class="arrows">
                    <b class="arrowUp"></b>
                    <b class="arrowDown"></b>
                </div>
            </a>
        </div>
        <!-- 图片列表 -->
        <ul class="lists"></ul>
    </div>
</body>

</html>
<script src="index.js"></script>

data.json

  • 这里需要用 Ajax 请求一下如下 json 数据
  • 创建 data.json ，粘贴如下数据
[
    {
        "id": 1,
        "title": "HUAWEI全网通版（亮黑色）",
        "price": 499,
        "time": "2017-03-15",
        "hot": 198,
        "img": "img/1.jpg"
    },
    {
        "id": 2,
        "title": "HUAWEI（曜石黑）",
        "price": 129,
        "time": "2017-02-08",
        "hot": 25,
        "img": "img/2.jpg"
    },
    {
        "id": 3,
        "title": "华为畅享7（香槟金）",
        "price": 895,
        "time": "2017-01-25",
        "hot": 568,
        "img": "img/3.jpg"
    },
    {
        "id": 4,
        "title": "HUAWEI全网通版（曜石黑）",
        "price": 1895,
        "time": "2016-12-30",
        "hot": 20000,
        "img": "img/4.jpg"
    },
    {
        "id": 5,
        "title": "HUAWEI全网通版（玫瑰金）",
        "price": 3587,
        "time": "2016-01-30",
        "hot": 1032654,
        "img": "img/5.jpg"
    },
    {
        "id": 6,
        "title": "华为畅享7（香槟金）",
        "price": 992,
        "time": "2018-01-01",
        "hot": 1,
        "img": "img/6.jpg"
    },
    {
        "id": 7,
        "title": "HUAWEI全网通版（樱语粉）",
        "price": 564,
        "time": "2017-02-19",
        "hot": 400,
        "img": "img/7.jpg"
    },
    {
        "id": 8,
        "title": "HUAWEI全网通版（曜石黑）",
        "price": 420,
        "time": "2017-01-25",
        "hot": 240,
        "img": "img/8.jpg"
    },
    {
        "id": 9,
        "title": "HUAWEI P10（钻雕金）",
        "price": 12,
        "time": "2014-01-01",
        "hot": 12345678,
        "img": "img/9.jpg"
    },
    {
        "id": 10,
        "title": "HUAWEI全网通版（曜石黑）",
        "price": 420,
        "time": "2017-01-25",
        "hot": 240,
        "img": "img/8.jpg"
    }
]

index.js

// 获取页面元素
let lists = document.querySelector(".lists");
let links = document.querySelectorAll(".topBar a");
let lis = lists.getElementsByTagName("li");
// Ajax 请求数据
let data = null;

// 1.数据请求 Ajax四部曲
function getData(url) {
    let xhr = new XMLHttpRequest();
    xhr.open("get", url);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            data = JSON.parse(xhr.responseText);
            BindHtml(data);
        }
    };
    xhr.send();
}
getData("data/data.json");

// 2.渲染li
function BindHtml(data) {
    var str = "";
    for (let i = 0; i < data.length; i++) {
        const el = data[i];
        str += `<li time="${el.time}" price="${el.price}" hot="${el.hot}">
        <img src="${el.img}" alt="">
        <p class="title">${el.title}</p>
        <p class="time">${el.time}</p>
        <p class="numInfo">
            <span class="price">${el.price}</span>
            <span class="hot">${el.hot}</span>
        </p>
    </li>`;
    }
    lists.innerHTML = str;
    lis = [].slice.call(lis);
}
// 3.给link绑定事件
for (let i = 0; i < links.length; i++) {
    links[i].flag = -1;
    links[i].onclick = function () {
        let that = this;
        for (let i = 0; i < links.length; i++) {
            if (links[i] != this) {
                links[i].flag = -1;
            }
        }
        this.flag *= -1;
        let sortFlag = this.getAttribute("sortFlag");
        let arrows = this.querySelectorAll("b");
        let arrCur = document.querySelectorAll("b.current");
        for (let i = 0; i < arrCur.length; i++) {
            arrCur[i].classList.remove("current");
        }
        if (this.flag == 1) {
            arrows[0].classList.add("current");
        } else {
            arrows[1].classList.add("current");
        }
        let frg = document.createDocumentFragment();
        if (sortFlag == "time") {
            lis.sort(function (a, b) {
                return (a.getAttribute(sortFlag).replace(/-/g, "") - b.getAttribute(sortFlag).replace(/-/g, "")) * that.flag;
            });
        } else {
            lis.sort(function (a, b) {
                return (a.getAttribute(sortFlag) - b.getAttribute(sortFlag)) * that.flag;
            });
        }
        for (let i = 0; i < lis.length; i++) {
            frg.appendChild(lis[i]);
        }
        lists.appendChild(frg);
    };
}
雪急飞绪
关注
专栏目录
商城排序实战案例(涉及AJAX，Jason，sort排序)
weixin_47724586的博客
08-09 353
商城排序案例(涉及AJAX，Jason，sort排序) 一，话不多说，我们先来介绍一下本次案例，商城排序是针对于深度解析Sort方法所进行的实际案例练习，其中利用Ajax请求数据，对json数据进行解析并渲染到浏览器上，案例实现了多种数据的交互排序，用简单的CSS制作了一个排序图标，图标会根据请求做出不同的相应动作。 二，结构如下图所示，首先创建一个主文件夹，里面新建css img js json 等四个文件夹，其中除img文件夹里的随便找的图片外，其他文件我会以代码块的形式进行粘贴。 三 (1)css
JS 简单实现商品排序
qq_44419617的博客
12-05 1706
具体思路 请求数据（ajax四部曲） 1、创建ajax实例 var xhr=new XMLHttpRequest() 2、采取xx方法打开请求的xx地址(默认异步) xhr.open("get","data/data.json") 3、onreadystatechange xhr.onreadystatechange=function(){ //xhr.status 符合以2开头的三位数 if(xhr.readyState==4&&/^2\d{2}/.
商城排序操作
yee22a的博客
01-02 424
关于商城排序的操作
原生js商品排序
weixin_34194379的博客
01-29 674
页面开发步骤 产品 制定需求:有一个商品列表我们想要让用户按照三个维度去排序 设计 根据产品的需求设计相关页面,产品同意过关 前端 1)将设计给的页面做成静态页 2)根据后台对接口,请求数据的API,看看接口能否跑通,数据是什么样的 3)绑定数据,做动态交互 后台 后台逻辑,数据处理等 测试 根据需求,设计图以及用户体验等找BUG 部署上线,测试环境上线 - 线上环境 接口文档: m...
JavaScript 商品价格排序
qq_37133856的博客
04-14 5278
Title             *{margin: 0;padding: 0; }         li{list-style: none;}         img{display: block; border: none;  }          .title{              width: 1000px; margin: 30px auto;
JS商城排序怎么写
LYL000305的博客
04-22 319
HTML部分 <body> <div class="container"id="productBox"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand"href="javascript:;"id='reset'>商城排序</a> <div class="collapse navbar-collapse show..
原生JS实现拖拽排序（亲测可用）
04-06
- 为了实现排序，可以遍历容器内的所有元素，比较它们与被拖动元素的相对位置，将被拖动元素插入到合适的位置，从而实现排序。 - 可以使用数组的`splice()`方法来实现元素的插入和删除，保持DOM结构与数据数组的...
JavaScript实现表格排序方法
10-27
在实现排序功能时，可以使用条件判断来确保代码在不同的浏览器中能够正常运行。 ### 知识点8：代码复用与模块化 为了避免代码冗余并提高可维护性，应当考虑代码的复用与模块化。在上述示例中，通过封装排序函数为...
Vue.js实现可排序的表格组件功能示例
10-17
在Vue.js中实现一个可排序的表格组件，我们需要考虑以下几个关键点：事件处理、元素动态操作、数据排序以及组件设计。下面将详细讲解这些知识点。 1. **事件处理**： 在Vue.js中，我们可以利用`v-on`指令来监听和...
js实现数组冒泡排序、快速排序原理
11-22
最后，通过递归调用快速排序函数并合并结果，实现整个数组的排序。 快速排序的平均时间复杂度为O(n log n)，最坏情况（即输入数组已完全排序或逆序）为O(n^2)。但实际应用中，由于快速排序的效率高，通常被认为是最...
mall-java:商城后端代码
04-16
工程简介 商城项目 项目结构 mall-coupon 优惠卷模块 mall-member 会员模块 mall-order 订单模块 mall-product 商品模块 mall-ware 仓储模块 延伸阅读
jQuery商品价格选择器
11-11
jQuery商品价格选择器
排序算法的综合实例（源程序+设计文档）
10-27
29. 排序综合（限1 人完成） 利用随机函数产生N个随机整数（20000以上），对这些数进行多种方法进行排序。 要求： 1) 至少采用三种方法实现上述问题求解（提示，可采用的方法有插入排序、希尔排序、起泡排序、快速排序、选择排序、堆排序、归并排序）。并把排序后的结果保存在不同的文件中。 2) 统计每一种排序方法的性能（以上机运行程序所花费的时间为准进行对比），找出其中两种较快的方法。 3) 如果采用4种或4种以上的方法者，可适当加分。 PS：采用了直接选择排序算法、冒泡排序、希尔排序、直接插入排序这四种排序算法。
JS实现冒泡排序，插入排序和快速排序并排序输出
10-23
冒泡排序、插入排序和快速排序是三种基础的排序算法，在JavaScript（JS）中实现这些算法可以加深对算法逻辑和程序设计的理解。以下是针对这三种排序算法的知识点详细说明： 冒泡排序（Bubble Sort）是一种简单的...
js之商城排序小案例
weixin_30875157的博客
01-05 510
运用所学的知识做了一个商城排序的案例，实现了以下需求： 分别点击上架时间、价格和热度，能按照点击的类别进行相应的排序； 升序的时候，代表升序的小三角变颜色，降序的时候正好反过来。 虽然只是个小小的案例，但是有许多问题解决，比如点击时候，排序小三角变化，当点击的三角变化时，其他没点击的小三角要恢复原来状态等等。可以说，涉及到了很多基础知识。 当然，代码中只有结构和js代码，css和json的文件不...
js通过两种方式进行对商品价格排序
零度空间
02-13 2424
javascript-illustration.png js通过两种方式进行对商品价格排序 <template> <div class="content"></div> </template> <script> export default { data() { return { user: { ...
电子商务网站中店铺按销量的排序
weixin_33953249的博客
05-16 835
使用lumen框架，$model为当前的店铺表 1、店铺列表中按销量的排序 1、得到按销量排序的店铺id $ruidList=\App\Models\Goods::select('user_id')->groupBy('user_id')->orderByRaw(' sum(sales_volume)')->offset($current)->limit(...
淘淘商城学习目录整理排序
weixin_34128237的博客
12-28 155
学习淘淘商城第一课（项目概述、架构分析） 学习淘淘商城第二课（搭建Maven工程） 淘淘商城第三课（使用tomcat插件启动web工程） 淘淘商城第四课（使用tomcat插件启动聚合工程） 淘淘商城第五课（安装SVN服务器） 淘淘商城第六课（向SVN服务器上传和下载代码） 淘淘商城第七课（SSM框架整合之逆向工程） 淘淘商城第八课（SSM框架整合之Dao层整合） 淘淘商城第九课...
织梦php商城排序,dedecms织梦list标签按照权重排序
weixin_28851191的博客
03-24 99
织梦默认的列表页排列顺序是按照时间修改顺序，但是有些产品的重要性是有区别的，所以我们很多时候需要列表页也可以按照我们的想法自由的排列，织梦里面提供了权重这个参数。A5说下大体的步骤:1、找到"根目录\include\arc.listview.class.php"文件。2、修改代码：在文件第727行处添加按weight排序判断代码(红色部分为新添加代码)。//排序方式$ordersql = '';i...
JavaScript实现表格排序与编辑功能
这个资源提供了JavaScript实现表格高级功能的一个实例，涉及到了前端开发中的数据操作、事件监听、CSS样式设计以及浏览器兼容性处理等多个关键知识点。通过学习和实践这些技术，开发者可以创建更加动态和用户友好的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值