js之商城排序小案例

Posted Hero行者

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js之商城排序小案例相关的知识,希望对你有一定的参考价值。

运用所学的知识做了一个商城排序的案例,实现了以下需求:

  1. 分别点击上架时间、价格和热度,能按照点击的类别进行相应的排序;
  2. 升序的时候,代表升序的小三角变颜色,降序的时候正好反过来。
    虽然只是个小小的案例,但是有许多问题解决,比如点击时候,排序小三角变化,当点击的三角变化时,其他没点击的小三角要恢复原来状态等等。可以说,涉及到了很多基础知识。
    当然,代码中只有结构和js代码,css和json的文件不在。虽然有点粗糙,但是还是拿出来献丑一下!!!
    如果需要全部代码和文件的,可以看下我gitHub。https://github.com/GHwangxingren/Sorting-of-goods

<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" >
            <span>华为畅享7(香槟金)</span>
            <span>2018-01-01</span>
            <span>1</span>
            <span>992</span>
        </li>
    </ul>
</div>
<script>
    var list = document.getElementById("list");
    var oLi = list.getElementsByTagName("li");
    var oHeader = document.getElementsByClassName("header")[0];
    var oLinks = oHeader.getElementsByTagName("a");

    //获取json数据
    var goodsList = null;
    var xhr = new XMLHttpRequest();//创建ajax实例
    xhr.open("get", "./json/product.json", false);//获取请求(请求方式,请求的api,设置同异步)
//监听xhr的readyState状态的change事件
    xhr.onreadystatechange = function () { 
        if (xhr.readyState == 4 && xhr.status == 200) {
            goodsList = xhr.responseText;
        }
    };
    xhr.send(null);
    goodsList = JSON.parse(goodsList);//将json字符转换为json对象。

    //绑定数据
    var str = "";
    for (var i = 0; i < goodsList.length; i++) {
        var goods = goodsList[i];
//es6模板字符串
        str += `<li data-price="${goods.price}" data-hot="${goods.hot}" data-time="${goods.time}">
                <img src="${goods.img}" >
                <span>${goods.title}</span>
                <span>上架时间:${goods.time}</span>
                <span>热度:${goods.hot}</span>
                <span>价格:¥${goods.price}</span>
                </li>`
    }
    list.innerhtml = str;

    //绑定点击事件
    for (var i = 0; i < oLinks.length; i++) {
        oLinks[i].index = i;
        oLinks[i].flag = -1;
        oLinks[i].onclick = function () {
            for (var k = 0; k < oLinks.length; k++) {
                if (oLinks[k]!==this){
                    oLinks[k].flag=-1;  // 恢复标志的默认-1
                }
            }
            var oIs1 = oHeader.getElementsByTagName("i");
            for (var j = 0; j < oIs1.length; j++) {
                oIs1[j].classList.remove("bg")
            }
            var oIs = this.getElementsByTagName("i");
            if (this.flag == -1) {
                oIs[0].classList.add("bg");
                oIs[1].classList.remove("bg");
            } else {
                oIs[1].classList.add("bg");
                oIs[0].classList.remove("bg");
            }

            this.flag *= -1;
            mySort.call(this);
        }
    }

    //排序
    function mySort() {
        var newLi = [].slice.call(oLi);// 获取完不是一个数组,需要转换成数组,然后在排序
        var flag = this.flag;
        var index = this.index;
        newLi.sort(function (a, b) {
            var aTtr, bTtr;
            if (index == 0) {
                aTtr = a.getAttribute("data-time").replace(/-/g, "");
                bTtr = b.getAttribute("data-time").replace(/-/g, "");
            } else if (index == 1) {
                aTtr = a.getAttribute("data-hot");
                bTtr = b.getAttribute("data-hot");
            } else {
                aTtr = a.getAttribute("data-price");
                bTtr = b.getAttribute("data-price");
            }
            return (aTtr - bTtr) * flag;
        });
        for (var i = 0; i < newLi.length; i++) {
            list.appendChild(newLi[i]);
        }
    }

</script>



以上是关于js之商城排序小案例的主要内容,如果未能解决你的问题,请参考以下文章

前端实现模拟购物商城案例实现

普歌-前端实现模拟购物商城案例实现

Node.js之路径切换小案例

js学习总结----小案例之跑马灯

webpack初学笔记 之 小案例篇demo1

Vant-Weapp小程序+商城案例