简单的水果价格排序(价格不重复)

一、预期实现的效果图

初始效果图：

价格从低到高排序：

价格从高到低排序：

二、我个人的思路

1、首先是获取每个水果对应的价格和名字

//获取每个li对应的价格
                for(var i= 0;i< len;i++){
                    str +=aLi[i].getElementsByClassName("price")[0].innerHTML;
                    str2 +=aLi[i].getElementsByClassName("flowers")[0].innerHTML;
                    if(i === len-1){
                        break;
                    }
                    str += " ";
                    str2 += " ";
                }
                var arr1= str.split(" "),
                    arr2= str.split(" "),
                    arr3= str2.split(" ");
                for(var i= 0;i< len;i++){
                    aLi[i].index= str.split(" ")[i];
                }

两个空的字符串str和str2分别用于存储所有水果的价格和名字，然后用split()方法将他们转换为数组存储于arr1,arr2,arr3中，if判断的作用是除去数组最后的空字符串。
对比：没有if判断的控制台打印arr1,arr2,arr3

有if判断的控制台打印arr1,arr2,arr3

for(var i= 0;i< len;i++){
    aLi[i].index= str.split(" ")[i];
}

这里的for循环纪录每个水果的下标，并且值对应他的价格，用于后面的字符串检索。
2、价格从低到高排序

arr2.sort(function(num1,num2){
    return num1-num2;
})

对原先水果的价格进行升序排序，结果如下

接下来就是获取价格升序后对应价格的位置（或所在数组中的下标），为了方便理解，可以画几张图来弄清楚

对于第一个水果的价格5.5，他在原数组中的下标为0，在升序排序后他的下标变为了5，价格为3.6的水果下标从1变成了2，价格为4.5的水果下标从2变成了3…，可以发现，对于升序前数组的第i个数据，用升序后的数组的indexOf()去检索原先的第i个数据得到的结果正好就是变化后的下标，嘿嘿，而这里检索的第i数据就是在第一步for循环所提到的aLi[i].index。请看一下代码：

aButton[1].onclick= function(){
    //对原数组进行升序
    arr2.sort(function(num1,num2){
        return num1-num2;
    })
    for(var j= 0;j< len;j++){
        var num1= arr2.indexOf(aLi[j].index);//获取升序后原数组中第j个数据的下标
        aLi[num1].getElementsByClassName("price")[0].innerHTML= arr1[j];//更改价格
        aLi[num1].getElementsByClassName("flowers")[0].innerHTML= arr3[j];//更改内容
        var num2= (arr1.indexOf(arr1[j])+1);//num2从一开始，因为图片从fruit1开始到fruit8
        aLi[num1].getElementsByTagName("img")[0].src= "images/fruit" + num2 + ".png";//更改图片
    }
}

3、价格从高到低
原理同升序一样，只不过下标颠倒了过来

aButton[0].onclick= function(){
    arr2.sort(function(num1,num2){
        return num1-num2;
    })
    for(var j= 0;j< len;j++){
        var num1= arr2.indexOf(aLi[j].index);
        //len-1-num1表示下标颠倒
        aLi[len-1-num1].getElementsByClassName("price")[0].innerHTML= arr1[j];
        aLi[len-1-num1].getElementsByClassName("flowers")[0].innerHTML= arr3[j];
        var num2= (arr1.indexOf(arr1[j])+1);
        aLi[len-1-num1].getElementsByTagName("img")[0].src= "images/fruit" + num2 + ".png";
    }
}

三、demo演示和完整代码

点我观看简单的水果价格排序

CSS代码
    body{
        margin: 0;
        background-color: #333;
    }
    p{
        margin: 0;
    }
    .clearfix:after{
        content: "";
        display: block;
        clear: both;
    }
    .wrap{
        width: 890px;
        padding: 50px 45px; 
        margin: 100px auto 0;
        background-color: #eee;
        border:1px solid #ccc;
    }
    ul{
        list-style: none;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    ul li{
        float: left;
        width: 206px;
        height: 226px;
        margin:0 22px 25px 0;
    }
    ul .bot{
        margin-bottom: 0;
    }
    ul .right{
        margin-right: 0;
    }
    ul li img{
        width: 100%;
        height: 178px;
    }
    ul li p{
        font-size: 14px;
    }
    ul li p span{
        float: right;
        color: #f00;
        font-size: 18px;
    }
    ul li p .flowers{
        float: left;
        color: #000;
        font-size: 14px;
    }
    .wrap .btn button{
        float:right;
        width: 75px;
        height: 30px;
    }

HTML代码
    <div class="wrap">
        <ul class="clearfix">
            <li>
                <img src="images/fruit1.png" width="200" height="200" alt="apple"/>
                <p>
                    <span class="flowers">apple</span>
                    <span class="price">5.5</span>
                    <span>¥</span>
                </p>
            </li>
            <li>
                <img src="images/fruit2.png" width="220" height="200" alt="grape"/>
                <p>
                    <span class="flowers">grape</span>
                    <span class="price">3.6</span>
                    <span>¥</span>
                </p>
            </li>
            <li>
                <img src="images/fruit3.png" width="220" height="200" alt="kiwifruit"/>
                <p>
                    <span class="flowers">kiwifruit</span>
                    <span class="price">4.5</span>
                    <span>¥</span>
                </p>
            </li>
            <li class="right">
                <img src="images/fruit4.png" width="220" height="200" alt="lemon"/>
                <p>
                    <span class="flowers">lemon</span>
                    <span class="price">2.8</span>
                    <span>¥</span>
                </p>
            </li>
            <li class="bot">
                <img src="images/fruit5.png" width="200" height="200" alt="orange"/>
                <p>
                    <span class="flowers">orange</span>
                    <span class="price">1.5</span>
                    <span>¥</span>
                </p>
            </li>
            <li class="bot">
                <img src="images/fruit6.png" width="200" height="200" alt="peach"/>
                <p>
                    <span class="flowers">peach</span>
                    <span class="price">4.8</span>
                    <span>¥</span>
                </p>
            </li>
            <li class="bot">
                <img src="images/fruit7.png" width="220" height="200" alt="pomegranate"/>
                <p>
                    <span class="flowers">pomegranate</span>
                    <span class="price">8.2</span>
                    <span>¥</span>
                </p>
            </li>
            <li class="bot right">
                <img src="images/fruit8.png" width="220" height="200" alt="strawberry"/>
                <p>
                    <span class="flowers">strawberry</span>
                    <span class="price">8</span>
                    <span>¥</span>
                </p>
            </li>
        </ul>
        <div class="btn clearfix">
            <button>从高到低</button>
            <button>从低到高</button>
        </div>
    </div>

JS代码
<script>
    var aButton= document.getElementsByTagName("button"),
        aLi= document.querySelectorAll("li"),
        len= aLi.length,
        str= "",
        str2= "";
        (function(){
            //获取每个li对应的价格
            for(var i= 0;i< len;i++){
                str +=aLi[i].getElementsByClassName("price")[0].innerHTML;
                str2 +=aLi[i].getElementsByClassName("flowers")[0].innerHTML;
                if(i === len-1){
                    break;
                }
                str += " ";
                str2 += " ";
            }
            var arr1= str.split(" "),
                arr2= str.split(" "),
                arr3= str2.split(" ");
            for(var i= 0;i< len;i++){
                aLi[i].index= str.split(" ")[i];
            }
            //价格从低到高
            aButton[1].onclick= function(){
                arr2.sort(function(num1,num2){
                    return num1-num2;
                })
                for(var j= 0;j< len;j++){
                    var num1= arr2.indexOf(aLi[j].index);
                    aLi[num1].getElementsByClassName("price")[0].innerHTML= arr1[j];
                    aLi[num1].getElementsByClassName("flowers")[0].innerHTML= arr3[j];
                    var num2= (arr1.indexOf(arr1[j])+1);
                    aLi[num1].getElementsByTagName("img")[0].src= "images/fruit" + num2 + ".png";
                }
            }
            //价格从高到低
            aButton[0].onclick= function(){
                arr2.sort(function(num1,num2){
                    return num1-num2;
                })
                for(var j= 0;j< len;j++){
                    var num1= arr2.indexOf(aLi[j].index);
                    aLi[len-1-num1].getElementsByClassName("price")[0].innerHTML= arr1[j];
                    aLi[len-1-num1].getElementsByClassName("flowers")[0].innerHTML= arr3[j];
                    var num2= (arr1.indexOf(arr1[j])+1);
                    aLi[len-1-num1].getElementsByTagName("img")[0].src= "images/fruit" + num2 + ".png";
                }
            }
        })();
    </script>