JavaScript对象实现排序

最新推荐文章于 2023-04-06 23:46:37 发布

bestkasscn

最新推荐文章于 2023-04-06 23:46:37 发布

阅读量1.2k

点赞数 2

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/bestkasscn/article/details/122079403

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JavaScript对象实现排序

需求

将素材页面中的商品，按价格进行排序。
1.1 多次点击排序按钮，商品按价格升序和降序交替排列
1.2 第一次点击排序，所有商品按价格升序排列
1.3 随着升序与降序排列，箭头符号成上下的形状，
利用数组的sort函数和js对象完成排序。然后操作dom，重排页面

实现

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css.css"/>
    <script src="main.js"></script>
</head>
<body>
    <nav onclick="sort()">排序(价格) <span class="down" id="jiantou"></span></nav>
    <ul id="pricesList">
        <li>
            <div>
                <img src="image/baby_1.jpg" alt=""/>
            </div>
            <p>
                产品1
            </p>
            <p>
                价格：345.00
            </p>
        </li>
        <li>
            <div>
                <img src="image/baby_2.jpg" alt=""/>
            </div>
            <p>
                产品2
            </p>
            <p>
                价格：133.00
            </p>
        </li>
        <li>
            <div>
                <img src="image/baby_3.jpg" alt=""/>
            </div>
            <p>
                产品3
            </p>
            <p>
                价格：52.00
            </p>
        </li>
        <li>
            <div>
                <img src="image/baby_4.jpg" alt=""/>
            </div>
            <p>
                产品4
            </p>
            <p>
                价格：223.00
            </p>
        </li>
        <li>
            <div>
                <img src="image/baby_5.jpg" alt=""/>
            </div>
            <p>
                产品5
            </p>
            <p>
                价格：655.00
            </p>
        </li>
        <li>
            <div>
                <img src="image/baby_6.jpg" alt=""/>
            </div>
            <p>
                产品6
            </p>
            <p>
                价格：142.00
            </p>
        </li>
    </ul>



</body>
</html>

main.js

var flag = false;
//定义Item对象，方便排序
function Item(imgsrc,itemname,price){
    this.imagesrc = imgsrc;
    this.itemname = itemname;
    this.price = parseFloat(price);
}
function compare(attr,flag) {
    //升序
    if (flag) {
        return function (a, b) {
            var value1 = a[attr];
            var value2 = b[attr];
            return value1 - value2;
        }
    }
    //降序
    else {
        return function (a, b) {
            var value1 = a[attr];
            var value2 = b[attr];
            return value2 - value1;
        }
    }
}

function sort(){
    //获取对象
    var obj = document.getElementById("pricesList");
    var list = obj.querySelectorAll("li");
    var itemlist = [];
    //将元素内的值封装成Item对象
    for (let i = 0; i < list.length; i++) {
        var temp = new Item(list[i].querySelector("img").src,list[i].querySelectorAll("p")[0].innerText,
            list[i].querySelectorAll("p")[1].innerText.replace("价格：",''));
        itemlist.push(temp);
    }
    flag = !flag;
    //排序
    itemlist.sort(compare("price",flag));
    //改变箭头方向
    if(flag) document.getElementById("jiantou").setAttribute("class","up");
    else document.getElementById("jiantou").setAttribute("class","down")
    //将排序后的值输出到页面
    for (let i = 0; i < itemlist.length; i++) {
        obj.querySelectorAll("li")[i].querySelector("img").src = itemlist[i].imagesrc;
        obj.querySelectorAll("li")[i].querySelectorAll("p")[0].innerText = itemlist[i].itemname;
        obj.querySelectorAll("li")[i].querySelectorAll("p")[1].innerText = "价格：" + itemlist[i].price;
    }
}

index.css

nav{
    background-color: gold;
    display: inline-block;
}
nav span{
    display: inline-block;
    width:16px;
    height: 16px;
    background-image: url("image/nav_arr_2x.png");
    background-size: 16px;

}
.down{
    background-position: 0px 4px;
}
.up{
    background-position: 0px -43px;
}
ul{
    padding-left: 0px;
}
ul>li{
    display: inline-block;
    width: 120px;
    box-sizing: border-box;
    padding: 5px;
    text-align: center;
}
li img{
    width: 110px;
}

图片路径和名称根据实际情况修改

效果：

bestkasscn

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript对象实现排序

JavaScript对象实现排序需求将素材页面中的商品，按价格进行排序。1.1 多次点击排序按钮，商品按价格升序和降序交替排列1.2 第一次点击排序，所有商品按价格升序排列1.3 随着升序与降序排列，箭头符号成上下的形状，利用数组的sort函数和js对象完成排序。然后操作dom，重排页面实现index.html<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8">
复制链接

扫一扫