jquery完成商品列表按价格升序、降序排序

2024-07-16 19:44| 来源: 网络整理| 查看: 265

实现思路

商品列表按价格的升序、降序的实现主要思路就是获取到所有的商品节点，然后都存到数组里面，数组就按照商品价格进行冒泡排序，将数组里的商品进行降序或升序的排序，最后清空在html下原本的所有商品，然后把数组里的商品按排序后的顺序重新添加到商品列表节点下。

HTML：

listSort 默认价格价格

¥199.00 111人付款花花公子西服男士套装秋季韩版潮流修身新郎结婚小服装店广东深圳

¥119.00 90人付款花花公子2019男士夹克衫中年爸爸装秋装中老年立领花花公子广东广州

¥129.50 190人付款花花公子西服套装男士修身帅气结婚新郎礼服新款春花花公子广东梅州

¥219.00 1190人付款花花公子男士休闲西服修身韩版潮流小西装男春秋季花花公子广东惠州

¥313.50 467人付款 2019年男士最新款阿迪达斯你广东广州

¥313.00 210人付款 1024 1024 上海

¥44.80 23人付款 2048 2048 重庆

¥461.00 361人付款 4096 4096 北京

¥133.30 333人付款 8192 8192 天津

¥111.10 111人付款 16384 16384 广东广州

CSS：

*{ margin: 0px; padding: 0px; } ul{ list-style: none; } .container{ position: relative; overflow: hidden; } .top{ margin: 10px 0px; padding: 5px; float: left; } .sortBtn{ width: 100px; height: 62px; line-height: 60px; margin-right: 5px; padding-left: 20px; color: black; background-color: white; border: 1px solid #999999; cursor: pointer; float:left; } .sortBtn{ background-repeat: no-repeat; background-position: 70px center; background-size: 40px 30px; } .sortBtn:nth-child(1){ background-image: url("img/funnel.png"); } .sortBtn:nth-child(2){ background-image: url("img/down.png"); } .sortBtn:nth-child(3){ background-image: url("img/up.png"); } .sortBtn:nth-child(1):hover{ background-image: url("img/funnelRed.png"); } .sortBtn:nth-child(2):hover{ background-image: url("img/downRed.png"); } .sortBtn:nth-child(3):hover{ background-image: url("img/upRed.png"); } .sortBtn:hover{ background-color: #e8e8e8; color: red; } .sortBtn1:nth-child(1){ background-color: #e8e8e8; background-image: url("img/funnelRed.png"); color: red; } .sortBtn2:nth-child(2){ background-image: url("img/downRed.png"); background-color: #e8e8e8; color: red; } .sortBtn3:nth-child(3){ background-image: url("img/upRed.png"); background-color: #e8e8e8; color: red; } .content{ margin: 5px auto; clear: both; overflow: hidden; } .item{ width: 300px; height: 500px; border: 1px solid #ededed; margin-right: 10px; float: left; overflow: hidden; padding: 10px; } .item>a{ text-decoration: none; color: black; } .imgbox{ } .imgbox img{ width: 290px; height: 290px; } .priceInfo{ height: 30px; line-height: 30px; margin-top: 10px; } .price{ float: left; } .deal{ float: right; color: #888888; } .title{ margin-top: 15px; } .title>a{ text-decoration: none; color: black; } .title>a:hover{ text-decoration: underline; color: indianred; } .business{ height: 30px; line-height: 30px; margin-top: 10px; } .shop{ float: left; } .shop>a{ color: #888888; } .shop>a:hover{ color: #ff4040; } .location{ float: right; }

javascript：

$(document).ready(function () { let array = []; let defaultArray = []; let prev; let after; //将商品列表保存到数组当中，一个数用来排序的数组，一个数默认的数组 $('.item').each(function (index) { array[index] = $(this); defaultArray[index] = $(this); }) //给排序按钮添加点击事件 $('.top>ul>li').each(function (index) { $(this).click(function () { //排序按钮的点击样式 removeAllClass(); $(this).addClass(`sortBtn${index+1}`); //默认排序 if(index==0){ $('.content').empty(); for(let i=0;i

【本文地址】

公司简介

联系我们