排序【总结】

时间 2021-01-20

需求

我做的有三个按钮，【从大到小】、【从小到大】、【乱序】

点击按钮发生相应的变化

需求分析：

涉及到排序，数组的sort()方法

div重新设置样式、或干脆重新插入div，前者更好点

实现思路：

1.提取所有div

2.取出图片地址和span内容

3.因为要根据span内容来排序，所以span单独再存一份副本

4.排序span副本

5.用for循环用已排序的span副本和原本进行比对，对上了，当前下标的div就重新赋这个原本的值，然后进行下一次比对，直到比对完成

难点：

无

难点解决方案：

无

涉及的新知识：

arr.sort(function(a,b){

　　a-b;

});

用json存数据

优化方向：

这个作业，1.我所有的声明和函数调用全部写在全局里，严重污染全局，日后想办法解决 2.代码过多

备注：

IIFE写法来写功能

如果两样东西第一排序值一样，能不能再设置个第二排序值，第三排序值，类似淘宝那样的排序，淘宝的排序是怎么做的

学习市面上的几种排序方法

/*

点击  --->    调用排序函数，传入对应参数   --->     排序函数通过switch值return给sort参数    --->
排序完成，调用设置参数函数    --->   排序成功


1.获得界面所有div，获得这些div相应的信息保存在数据源数组里
2.这里我将取得的数据存一份在json里sValue，另一份排序用的关键值单独存在sIndex里
3.获取按钮，绑定按钮点击时间函数
4.写排序函数，先把关键值数组排好序
5.写设置src和span的函数，根据第4步排好序的值来匹配，每一个都要跟sValue一一匹配,如果匹配上了，就取值赋值并删除掉这条数据


sortDiv函数用到外面的sIndex、sValue、oriDiv和oriDivLen变量
sortIndex函数用到外面的sIndex变量


*/


//获取元素
var oCon = $('con'),
    oriDiv = oCon.getElementsByTagName('div'),
    oriDivLen = oriDiv.length;

var sValue = [],
    sIndex = [];


//提取值塞进数组
for( var i=0; i<oriDivLen; i++ ){
    var json = {};
    json.imgSrc = oriDiv[i].getElementsByTagName('img')[0].src;
    json.spanText = oriDiv[i].getElementsByTagName('span')[0].innerHTML;
    sValue.push(json);
    sIndex.push(json.spanText);
}



//三个按钮
var oBtns = $('btns'),
    btn1 = oBtns.getElementsByTagName('a')[0],
    btn2 = oBtns.getElementsByTagName('a')[1],
    btn3 = oBtns.getElementsByTagName('a')[2];


btn1.onclick = function(){
    sortIndex(1,sIndex);
    sortDiv();
}


btn2.onclick = function(){
    sortIndex(-1,sIndex);
    sortDiv();
}


btn3.onclick = function(){
    sortIndex(0,sIndex);
    sortDiv();
}




//下标排序函数
function sortIndex( sortType,dataArr ){
//-1:升序;        1:降序;        0:乱序

    dataArr.sort(function(a,b){
        switch(sortType){
            case -1:
                return a-b;
                break;
            case 1:
                return b-a;
                break;
            case 0:
                return Math.random() - 0.5;
                break;
            default:
                break;
        }

    });
}









//div重赋值函数
function sortDiv(){

    for(var i=0; i<oriDivLen; i++){
        for(var j=0; j<oriDivLen; j++){
            var spanAttr = sValue[j].spanText;
            var imgSrcAttr = sValue[j].imgSrc;
            if( sIndex[i] == spanAttr ){

                oriDiv[i].getElementsByTagName('span')[0].innerHTML = spanAttr;
                oriDiv[i].getElementsByTagName('img')[0].src = imgSrcAttr;
                break;
            }
        }
    }


}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

<style>
    
*{ margin: 0; padding: 0; }
body{ background: #f1f1f1; }

.item{ margin: 15px; width: 150px; float: left; padding: .5em; border: 1px solid #673ab7; border-radius: 15px; }
.item a{ width: 80%; }
.item img{ width: 100%; }
.item p{ font-size: .8em; float: left; width: 100%; text-align: center; margin-top: 6px; color: #666; }
.item span{ color: #010101; font-weight: bold; }


#con{ width: 1008px; margin: 0 auto; }

.clear{ zoom: 1; }
.clear:after{ content: ''; display: block; vertical-align: middle; clear: both; }


.main{ margin-top: 20px; }


#btns{   
    width: 300px;
    height: 50px;
    margin: 0 auto;
}


#btns a{ position: relative; width: 80px; height: 30px; text-decoration: none; float: left; background: #9C27B0;
    color: #fff; line-height: 30px; text-align: center; margin: 5px; border-radius: 5px; }
#btns a:after{ content: ''; width: 80px; height: 30px; z-index: -1; background: #6e137d; position: relative; top: -27px; display: block; border-radius: 5px; }
#btns a:hover:after{ top: -30px; }
#btns a:hover{ background: #6e137d; top: 3px; }

</style>

</head>
<body>


<div class="main">

    <div id="btns">
        <a href="javascript:;">从大到小</a>
        <a href="javascript:;">从小到大</a>
        <a href="javascript:;">乱序排列</a>
    </div>

    <div id="con" class="clear">
        <div class="item">
            <a href="#"><img src="img/1.jpg" alt="图片"></a>
            <p>阅读量：<span>112</span></p>
        </div>


        <div class="item">
            <a href="#"><img src="img/2.jpg" alt="图片"></a>
            <p>阅读量：<span>342</span></p>
        </div>


        <div class="item">
            <a href="#"><img src="img/3.jpg" alt="图片"></a>
            <p>阅读量：<span>6757</span></p>
        </div>

        
        <div class="item">
            <a href="#"><img src="img/4.jpg" alt="图片"></a>
            <p>阅读量：<span>2356</span></p>
        </div>


        <div class="item">
            <a href="#"><img src="img/5.jpg" alt="图片"></a>
            <p>阅读量：<span>7784</span></p>
        </div>

        
        <div class="item">
            <a href="#"><img src="img/6.jpg" alt="图片"></a>
            <p>阅读量：<span>1231</span></p>
        </div>

        
        <div class="item">
            <a href="#"><img src="img/7.jpg" alt="图片"></a>
            <p>阅读量：<span>1345</span></p>
        </div>


        <div class="item">
            <a href="#"><img src="img/8.jpg" alt="图片"></a>
            <p>阅读量：<span>1130</span></p>
        </div>

        
        <div class="item">
            <a href="#"><img src="img/9.jpg" alt="图片"></a>
            <p>阅读量：<span>42</span></p>
        </div>

        
        <div class="item">
            <a href="#"><img src="img/10.jpg" alt="图片"></a>
            <p>阅读量：<span>345</span></p>
        </div>
    </div>
</div>


<script src="getId.js"></script>
<script src="main.js"></script>

</body>
</html>

排序 【总结】

排序【总结】