JS原生加jquery商品排序

其他 2020-04-05 10:40:24 阅读次数: 0

效果图

在这里插入图片描述

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/reset.min.css">
    <link rel="stylesheet" href="./css/index1.css">

</head>

<body>

    <div class="content">
        <div class="header">
            <span>排序</span>

            <a href="javascript:;">上架时间
                <i class="up"></i>
                <i class="down"></i>
            </a>
            <a href="javascript:;">热度
                <i class="up"></i>
                <i class="down"></i>
            </a>
            <a href="javascript:;">价格
                <i class="up"></i>
                <i class="down"></i>
            </a>
        </div>
        <ul id="list">
            <li>
                <img src="./img/1.jpg" alt="">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
            </li>
            <li>
                <img src="./img/1.jpg" alt="">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
            </li>
            <li>
                <img src="./img/1.jpg" alt="">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
            </li>
            <li>
                <img src="./img/1.jpg" alt="">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
            </li>
            <li>
                <img src="./img/1.jpg" alt="">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
            </li>
            <li>
                <img src="./img/1.jpg" alt="">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
            </li>


        </ul>
    </div>
    <script src="./js/jquery-1.11.3.js"></script>
    <script src="./js/utils.js"></script>
    <script src="./js/jquery.js"></script>
</body>

</html>

css

html,body{
    width: 100%;
    height: 100%;
    font-family: 'kaiti';
    background: rgb(231, 231, 231);
    font-size: 18px;
}
.content{
    width: 1200px;
    margin: auto;
}
.content .header{
    height: 50px;
    line-height: 50px;
    width: 100%;
    background: #fff;
    margin-top: 20px;
}
.content .header span{
    margin-left: 20px;
}
.content .header a{
    margin-right: 10px;
    position: relative;
}

.content .header a i{
    position: absolute;
    width: 0;
    height:0;
    border: 5px solid transparent;
}
.content .header a i.up{
    border-bottom: 5px solid black;
    top: 0px;
}
.content .header a i.down{
    
    border-top: 5px solid black;
    top: 12px;
}

.content .header a i.up.bg{
    border-bottom: 5px solid rgb(255, 0, 0);
    top: 0px;
}
.content .header a i.down.bg{
    
    border-top: 5px solid rgb(255, 0, 0);
    top: 12px;
}

#list{
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#list li{
    width: 205px;
    height: 305px;
    background: #fff;
    padding: 5px;
    margin-top: 25px;
}
#list li img{
    width: 100%;
}
#list li span{
    display: block;
    text-align: center;
}

JS

js原生排DOM

(function(){// 避免全局变量的干扰
    // 1.获取元素
    let list = document.getElementById("list");
    let navs = document.getElementsByTagName("a");
    let oLis = list.getElementsByTagName("li");
    let data;
    // 2. 获取到product.json文件中的数据 ajax
    // 1) 创建一个ajax实例  
    let  xhr = new XMLHttpRequest();// 
    //2) 打开一个路径
    // false : 代表同步；直到前端成功接收到后端所有的数据后，才会继续向下执行；true ： 异步，当ajax发送请求以后，浏览器不会在此等候后端返回的数据，而是直接向下执行JS代码；
    xhr.open("get","./json/product.json",false);
    // 3) 监听回调函数
    xhr.onreadystatechange = function(){
        // 当xhr实例的readyState的值是4，并且xhr.status 是2开头的三位数，说明前端成功接收到后端返回的数据；
        if(xhr.readyState===4&&/^2\d{2}/.test(xhr.status)){
            data = JSON.parse(xhr.responseText)
        }
    }
    // 以上三步是ajax任务的准备；请求并没有发出去
    // 4.发送请求
    xhr.send();
    //console.log(data);
    
   // 3. 绑定数据，放到页面上
   function bindHtml(){
       // 循环data数据，拼接成字符串，最后通过innerHTML放入list中
       let str = ``;
       for(let i=0;i<data.length;i++){
           let cur = data[i];
            str+= `<li data-time="${cur.time}" data-price="${cur.price}" data-hot="${cur.hot}">
                        <img src="${cur.img}" alt="">
                        <span>${cur.title}</span>
                        <span>${cur.time}</span>
                        <span>${cur.hot}</span>
                        <span>${cur.price}</span>
                   </li>`
       }
       list.innerHTML=str;
   }
   bindHtml();
   // 4.给每一个a绑定点击事件
   for(let i=0;i<navs.length;i++){
        navs[i].index=i;
        navs[i].flag=-1;
        navs[i].onclick = function(){
            this.flag*=-1;// 点1下 +1； -1
            sortList.call(this);
            removeArrow.call(this);
            addArrow.call(this);
        }
   }
   function sortList(){
       /// this--> 当前被点击的a元素
        var ary = utils.toArray(oLis);
        var newAry = ["data-time","data-hot","data-price"];
        // 排序
        //console.log(this);
        let that  = this;
        // ary : 是一个数组，数组中存放了每一个li的元素对象
        ary.sort(function(a,b){
            // a,b 代表每一个li的对象
            // var spans=a.getElementsByTagName("span");
            // var span=b.getElementsByTagName("span")
            // return spans[2].innerHTML-span[2].innerHTML;
            // getAttribute : 获取自己的行间属性
            // this--> window
            let cur = a.getAttribute(newAry[that.index]);
            let next = b.getAttribute(newAry[that.index]);
            if(that.index===0){
                // 如果that.index=0说明点击的是上架时间；
                cur= cur.replace("-","").replace("-","");
                next=next.replace("-","").replace("-","");
            }
            return  (cur-next)*that.flag;
        });
        // 文档碎片，减少了DOM的回流；
        let  frg= document.createDocumentFragment()
        for(let i=0;i<ary.length;i++){
            frg.appendChild(ary[i]);
        }
        list.appendChild(frg);
        frg= null;
   }
   // 实现增加背景颜色
   function addArrow(){
        let up = this.children[0];
        let down=this.children[1];
        if(this.flag>0){
            // 如果当前的flag大于0,这是升序；
            up.classList.add("bg");
            down.classList.remove("bg")
        }else{
            up.classList.remove("bg")
            down.classList.add("bg")
        }
   }
    function removeArrow(){
       for(let i=0;i<navs.length;i++){
            if(this!=navs[i]){
                //需要排除当前点击这个a;
                navs[i].children[0].classList.remove("bg");
                navs[i].children[1].classList.remove("bg");
                navs[i].flag=-1;
            }
       }
   }
})();
    // let a = 1;
    // setTimeout(function(){// 定时器是个异步的任务；
    //     a=10
    // },1000);
    // console.log(a);// 1

js排数据，只能排序

var data = [{
        "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"
    }
]

function bindHtml() {
    var str = ``;
    for (var i = 0; i < data.length; i++) {
        var cur = data[i];
        str += `<li>
                    <img src="${cur.img}" alt="">
                    <span>${cur.title}</span>
                    <span>${cur.time}</span>
                    <span>${cur.hot}</span>
                    <span>${cur.price}</span>
               </li>`
    }
    list.innerHTML = str;
}
bindHtml();



let as = document.querySelectorAll('a');
var newAry = ["time", "hot", "price"]

for (var i = 0; i < as.length; i++) {
    as[i].index = newAry[i];
    as[i].flag = -1;
    as[i].onclick = function () {
       
        this.flag *= -1;
        removeArrow.call(this);
        mySort.call(this);


    }

}

function mySort() {

    data.sort((a, b) => {
        if (this.index === "time") {
            a[this.index] = a[this.index].replace(/-/g, "");
            b[this.index] = b[this.index].replace(/-/g, "");

        }

        return (a[this.index] - b[this.index]) * this.flag

    })

    bindHtml();
}
function removeArrow(){
    for(let i=0;i<as.length;i++){
        if(this!==as[i]){
            as[i].flag=-1;
        }
    }
}

jquery.js

let send = () => {
    $.ajax({
        url: "./json/product.json",
        type: "get",
        async: false,
        success: function (data) {
            bindHtml(data);
            bang();

        }
    })
}
let bindHtml = (data) => {
    let str = ``;
    $(data).each(function (index, item) {
        str += `<li data-time="${item.time}" data-price="${item.price}" data-hot="${item.hot}">
        <img src="${item.img}" alt="">
        <span>${item.title}</span>
        <span>${item.time}</span>
        <span>${item.hot}</span>
        <span>${item.price}</span>
        </li>`
    })
    $("#list").html(str)
}
var f;
var up;
var dowm;
var c;
let bang = () => {
    $("a").each(function (index, item) {
        $(this).attr("index", index);
        $(this).attr("flag", -1);
    })
    $(".header a").click(function (data) {
        $(this).attr("flag", $(this).attr("flag") * -1)
        c = $(this).attr("index");
        f = $(this).attr("flag");
        let e = $("li").sort(function (a, b) {
            var newAry = ["data-time", "data-hot", "data-price"];
            let cur = a.getAttribute(newAry[c]);
            let next = b.getAttribute(newAry[c]);
            if (c === "0") {
                cur = cur.replace("-", "").replace("-", "");
                next = next.replace("-", "").replace("-", "");
            }
            return (cur - next) * f;
        })
        $(e).each(function (index, item) {
            $("#list").append(item)
        })
        up = $(this).children()[0];
        down = $(this).children()[1];
        addArrow();
        removeArrow();
    })
}
let addArrow = () => {
    if (f > 0) {
        $(up).addClass("bg");
        $(down).removeClass("bg");
    } else {
        $(up).removeClass("bg");
        $(down).addClass("bg");
    }
}
let removeArrow = () => {
    $(".header a").each(function (index, item) {
        if (index !== Number(c)) {
            $(item).find("i").removeClass("bg")
            $(item).attr("flag", -1);
        }
    })
}
send();

资源

ps：图片自己找吧，懒得发了，囧。json我上传到我的资源。

宅男呀
发布了51 篇原创文章 · 获赞 13 · 访问量 3073
私信 关注

猜你喜欢

转载自blog.csdn.net/Sheng_zhenzhen/article/details/103945117
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022