js:商品排序功能(图片自己找)-CSDN博客

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5.index.html</title>
    <link rel="stylesheet" href="css/5.reset.css">
    <link rel="stylesheet" href="css/5.css">
</head>
<body>
<div class="container">
    <div class="tab">
        <div class="label">排序</div>
        <ul id="tab">
            <li>上架时间</li>
            <li>价格</li>
            <li>热度</li>
        </ul>
    </div>

    <ul class="goodsList" id="goodsList">

    </ul>
</div>
<script src="js/5.js"></script>
</body>
</html>
复制代码

css

.container{
    width: 1200px;
    margin: auto;
}
.tab{
    background: yellow;
    padding: 12px 30px;
    line-height: 38px;
    overflow: hidden;
    margin-bottom: 30px;
}
.goodsList li{
    width: 200px;
}
.label{
    float: left;
    padding-right: 30px;
}
#tab{
    float: left;
    overflow: hidden;
}
#tab li{
    float: left;
    padding: 0 30px;
    position: relative;
}
#tab li:before{
    display: block;
    content: '';
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-bottom:8px solid #333333;
    position: absolute;
    right: 0;
    top: 0;
}
#tab li.up:before{
    display: block;
    content: '';
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-bottom:8px solid red;
    position: absolute;
    right: 0;
    top: 0;
}
#tab li:after{
    display: block;
    content: '';
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top:8px solid #333333;
    position: absolute;
    right: 0;
    bottom: 0;
}
#tab li.down:after{
    display: block;
    content: '';
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top:8px solid red;
    position: absolute;
    right: 0;
    bottom: 0;
}
.goodsList li{
    float: left;
    width: 200px;
    padding: 0 20px;
}
.goodsList li p{
    line-height: 28px;
    padding-top: 10px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
复制代码

rest.css

html,body,div,ul,li,img,p{
    margin: 0;
    padding: 0;
}
body{
    background: #eeeeee;
}
ul{
    list-style: none;
}
img{
    width: 100%;//img是继承li的宽度
    display: block;
}
复制代码

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"
  }
]
复制代码

js

;(function(){
    var data=null;

    //获取选项
    var oTab=document.getElementById('tab');
    var oTabs=oTab.getElementsByTagName('li');

    //获取页面展示数据
    var goodsList=document.getElementById('goodsList');
    var goodsListLi=goodsList.getElementsByTagName('li');

    //ajax请求数据
    //1.创建一个ajax对象
    var xhr=new XMLHttpRequest;
    //2.从json中获取数据
    xhr.open('GET','./json/product.json',false);
    //3.判断是否成功获取数据
    xhr.onreadystatechange=function(){
        if(xhr.readyState===4&&xhr.status===200){
          data=JSON.parse(xhr.responseText);//正常返回的是JSON格式的字符串,但是我们要用JSON格式的字符串,所以JSON.parse()一下
        }
    };
    xhr.send(null);
    console.log(data);//返回JSON格式的对象
    
    //绑定数据,渲染数据
    var str = "";
    for (var i = 0; i < data.length; i++) {
        console.log(data);
        var item = data[i];

        str+=`<li data-time="${item.time}" data-price="${item.price}" data-hot="${item.hot}">
                  <img src="${item.img}" alt="">
                  <p>${item.title}</p>
                  <p>上架时间: ${item.time}</p>
                  <p>价格: ${item.price}</p>
                  <p>热度: ${item.hot}</p>
</li>`
    }
    goodsList.innerHTML = str;

    for(var i=0;i<oTabs.length;i++){
        var tabLi=oTabs[i];

        tabLi.flag=-1;

        tabLi.ind=i;
        //console.log(i);//索引是0 1 2
        //自定义属性flag
        tabLi.onclick=function(){
            //console.log(i);索引已经变成3了,要在onclick外面存个索引
            //console.log(this);点哪个哪个就是oTabs中的哪个li
            this.flag*=-1;//点击的时候,tabLi.flag为正1,就让它按从小到大排序

            //切换选项
            switchTab.call(this);

            // 排序
            sortGoods.call(this);
        }
    }

    // 给商品排序
    function sortGoods(){
        // oGoods.sort();
        oGoods = Array.prototype.slice.call(goodsListLi);

        var that = this;

        oGoods.sort(function(a, b){
            // that.index; // 0，上架时间，1价格； 2、热度
            // a,b是数组的相邻两项
            var aProp = null;
            var bProp = null;

            if(that.ind == 0){
                aProp = a.getAttribute("data-time").replace(/-/g, "");
                bProp = b.getAttribute("data-time").replace(/-/g, "");
            }else if(that.ind == 1){
                aProp = a.getAttribute("data-price");
                bProp = b.getAttribute("data-price");
            }else{
                aProp = a.getAttribute("data-hot");
                bProp = b.getAttribute("data-hot");
            }

            return that.flag*(aProp-bProp);
        });

        // 将排好序的元素渲染到页面上
        var oFragment = document.createDocumentFragment();
        for(var i = 0; i < oGoods.length; i++){
            var item = oGoods[i];
            // dom映射
            oFragment.appendChild(item)
        }
        goodsList.appendChild(oFragment);
    };

    function switchTab() {
        // 先要清除所有的li上的三角的样式
        for (var j = 0; j < oTabs.length; j++) {
            if (oTabs[j] !== this) {
                oTabs[j].classList.remove("up");
                oTabs[j].classList.remove("down");
                oTabs[j].flag = -1;
            }
        }

        // 然后再根据this.flag给this添加三角的样式
        if (this.flag === 1) {//1
            this.classList.add("up");
            this.classList.remove("down");
        } else {//-1
            this.classList.add("down");
            this.classList.remove("up");
        }
    };
})();
复制代码