谷粒商城p188-页面排序-排序字段回显-代码精简

m0_56738550

已于 2023-03-10 15:38:54 修改

阅读量143

点赞数 1

文章标签： javascript 开发语言 java jquery 正则表达式

于 2023-03-03 18:03:52 首次发布

本文链接：https://blog.csdn.net/m0_56738550/article/details/129324869

版权

谷粒商城p188-页面排序代码精简

看了雷神的课，代码太多又看着眼花了不想敲，而且有功能重复的地方，就想着自己换个方法做，但是又没有系统的学过前端，所以做了好几个小时，记录一下。

以下是代码 在js标签里的页面加载完成时执行的方法

// 页面渲染完成后执行的代码
    window.onload = function () {
        // 取出url
        var url = window.location.href.toString();
        // 正则的意义：是否有sort字段，取出按哪个字段排序，以及排序方式
        var hasSort = eval('/(sort=)([^_&]*)_([^&]*)/gi');
        // 将上面正则表达式括号里提取出每个值算作数组的一个元素，加上第0个元素默认为整个正则匹配到的值，组成数组(4个元素)
        var sortArray = hasSort.exec(url);
        // 判断url中是否有sort字段， 若有，给文本内容加上‘↑’或‘↓’
        if (sortArray !== null && sortArray.length !== 0) {
            // 遍历
            $(".sort_a").each(function () {
                // 清空排序标识字符
                $(this).text($(this).text().replace('↓', '').replace('↑', ''));
                // 同类元素清空
                $(this).css({"color": "#333", "border-color": "#CCC", "background": "#FFF"});
                // 获取每个的sortRule的值
                var sortRule = $(this).attr("sortRule");
                // 判断是否与url中的值对应，若是，判断升降序，然后加上标识字符
                if (sortRule === sortArray[2]) {
                    // 当前点击的元素变为选中状态(背景变红.)
                    $(this).css({"color": "#FFF", "border-color": "#e4393c", "background": "#e4393c"})
                    // 不区分大小写，判断升降序
                    //  *升序
                    if (sortArray[3].toLowerCase() === "asc".toLowerCase()) {
                        // 切换一个类，如果存在则删除，不存在则添加
                        $(this).toggleClass('asc');
                        //加上升序标识字符
                        $(this).text($(this).text() + '↑');
                    } else {
                    // *降序
                        $(this).toggleClass('desc');
                        $(this).text($(this).text() + '↓');
                    }
                }
            })
        }
    }