javascript — изотопная фильтрация по полю даты

Question

javascript — изотопная фильтрация по полю даты

У меня такая изотопная структура;

<div class="grid">
<div class="element-item transition metal" data-category="category-item">
<h2 class="name">Gold</h2>
<input type="hidden" value="01/02/2015" class="crdate">
</div>
<div class="element-item metalloid" data-category="category-item">
<h2 class="name">Antimony</h2>
<input type="hidden" value="04/02/2015" class="crdate">
</div>
</div>

Я хочу отсортировать данные по скрытому значению поля даты.

У меня есть две радио кнопки;

<input type="radio" name="sortdate" class="sort_new" value="new">New<br>
<input type="radio" name="sortdate" class="sort_old" value="old">Old

Мое требование — когда я нажимаю на переключатели, я хочу отсортировать данные по значению поля даты. Предположим, если я нажму на кнопку «Новый», то элемент с новой датой будет отображаться сверху и наоборот.

Моя структура JavaScript, как это;

$('.sort_new').on('click', function () {
$('.grid').isotope({
getSortData: {
date: function ( itemElem  ) {
return $( itemElem ).find('.crdate').val();
}
},
sortBy: 'date',
sortAscending: false,
});

});

$('.sort_old').on('click', function () {
$('.grid').isotope({
getSortData: {
date: function ( itemElem  ) {
return $( itemElem ).find('.crdate').val();
}
},
sortBy: 'date',
sortAscending: true,
});

});

Пожалуйста, помогите мне решить это. Благодарю.

2

javascript jquery jquery-isotope php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Попробуйте заменить форматированную дату во входном значении фактической отметкой времени и измените свой JS:

$('.sort_new').on('click', function () {
$('.grid').isotope({
getSortData: {
date: function ( itemElem  ) {
return parseInt($( itemElem ).find('.crdate').val(), 10);
}
},
sortBy: 'date',
sortAscending: false,
});
});

$('.sort_old').on('click', function () {
$('.grid').isotope({
getSortData: {
date: function ( itemElem  ) {
return parseInt($( itemElem ).find('.crdate').val(), 10);
}
},
sortBy: 'date',
sortAscending: true,
});
});

2