原生js实现简单的正序倒序的排列

2019-04-26  本文已影响0人  霍林河眼中的许先生

列表开发中用的到的小功能,列表正序倒序功能。

直接上代码不多说


html部分

```

<button id="qie" onclick="cut();">正序</button>

    <ul id="gets">

    </ul>

```

css

```

button{

    width: 200px;

    height: 100px;

    font-size: 50px;

}

gets{

    width: 100px;

    overflow: hidden;

}

#gets li{

float: left;

width: 100%;

overflow: hidden

}

li span{

    float: right;

}

```

js

```

var result =[

      {id:1,name:'中国银行'},

      {id:2,name:'北京银行'},

      {id:3,name:'建设银行'},

      {id:4,name:'工商银行'},

      {id:5,name:'交通银行'}

    ]

    var qie =document.getElementById("qie")

    var gets= document.getElementById("gets")

    //  初始化

      cut();

    // 正序

    function sortId(a,b){ 

      return a.id-b.id 

    }

    // 倒序

    function sortId2(a,b){ 

      return b.id-a.id 

    }

    var flag=true;

    function cut(){

                if(flag){

                    qie.innerHTML="倒序"

                    result.sort(sortId2);

                    // console.log(result);

                    var res="";

                    for (var i=0;i<result.length;i++){ 

                        res += '<li>' +result[i].id  +'<span>'+ result[i].name+'</span>'+'</li>'

                    }

                    gets.innerHTML=res;

                    flag = false;

                }else{

                    qie.innerHTML="正序"

                    result.sort(sortId);

                    var res2="";

                    for (var i=0;i<result.length;i++){ 

                        res2 += '<li>' +result[i].id  +'<span>'+ result[i].name+'</span>'+'</li>'

                    }

                    gets.innerHTML=res2;

                    flag = true;

                }

    }

```

上一篇下一篇

猜你喜欢

热点阅读