javascript - 基于日期字段的同位素过滤

Question

我有一个这样的同位素结构；

<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,
            });

      });

请帮我解决这个问题。谢谢。

Answer 1

尝试用实际时间戳替换输入值中的格式化日期并修改您的 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,
    });
});