我有这样的同位素结构;
<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,
});
});
请帮我解决这个问题。感谢。
答案 0 :(得分:2)
尝试将输入值中的格式化日期替换为实际时间戳并修改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,
});
});