У меня есть кнопка с двумя режимами. Первый порядок сортировки по убыванию. Второй порядок сортировки по возрастанию. Я хочу, чтобы наши ящики были отсортированы таким образом.
Мы помещаем наши данные в customSort. И здесь мы определили переменную с именем timeToNum. Его задача - получить часы и преобразовать их в метку времени. После этого шага (время + метка времени). Коробки с часами для сортировки (время). Изменение timeToNum еще не было сделано. Только мы установили имя для него. Вы должны создать эту переменную. Если вы не знаете этот метод. Вы можете отсортировать эти ящики самостоятельно.
let FlyList = [{
"time": "15:20",
},
{
"time": "15:10",
},
{
"time": "18:40",
},
{
"time": "23:40",
}
];
// Sort Array
function customSort(array, field, Desc, type) {
if (!type && field.toLowerCase().indexOf('time') !== -1) type = 'time';
switch (type) {
case 'time':
Desc ? list.sort((a, b) => this.timeToNum(a[field]) - this.timeToNum(b[field])) : list.sort((a, b) => this.timeToNum(b[field]) - this.timeToNum(a[field]));
break;
default:
var type = Desc ? true : false;
array.sort(function(a, b) {
if (type) return a[field] - b[field];
else return b[field] - a[field];
});
break;
}
};
body {
margin: 0 auto;
padding: 0 auto;
background: skyblue;
}
.full-item {
width: 800px;
height: 600px;
margin: 50px auto;
background: grey;
}
.full-item .button-item {
width: 100%;
height: 80px;
background: #B33771;
}
.full-item .button-item button {
/*margin: 30px 45%;*/
}
.full-item .item-sort {
width: 100%;
height: 500px;
background: white;
margin-top: 10px;
}
.full-item .item-sort:first-child {
margin-top: 10px;
}
.full-item .item-sort .item {
width: 90%;
height: 80px;
background: red;
margin: 10px auto;
}
.item-sort .item .pic {
width: 30%;
height: 100%;
background: #3B3B98;
float: left;
}
.item-sort .item .time {
width: 70%;
height: 100%;
background: #1B9CFC;
float: right;
}
.item-sort .item .time span {
color: white;
text-align: center;
display: block;
line-height: 100px;
}
<div class="full-item">
<div class="button-item">
<p>Sort By </p>
<button id="sort-asc-desc">Asc/Desc</button>
</div>
<div class="item-sort">
<div class="item">
<div class="pic" style="background: green">image</div>
<div class="time" style="background: green"><span>{{time}}</span></div>
</div>
<div class="item">
<div class="pic" style="background: red">image</div>
<div class="time" style="background: red"><span>{{time}}</span></div>
</div>
<div class="item">
<div class="pic" style="background: grey">image</div>
<div class="time" style="background: grey"><span>{{time}}</span></div>
</div>
<div class="item">
<div class="pic" style="background: teal">image</div>
<div class="time" style="background: teal"><span>{{time}}</span></div>
</div>
</div>
</div>
Я использовал метод javascript 6.
Вы можете использовать jQuery или Javascript 6. Для сортировки полей.