有没有人知道https://isotope.metafizzy.co/?
我试着按他们最后发布的日期排序,但排序不正确。今天,昨天,还有几个月。
html
<div id="GROUP-<!-- |g_id| -->" class="ml-item ml-mem group-<!-- |g_id| -->" data-category="group-<!-- |g_id| -->" data-id="<!-- |id| -->">
<span class="lastposted"><!-- |last_post| --></span>
<button data-sort-value="lastposted">last posted by</button>
下面是Isotope代码:
// store filter for each group
var buttonFilters = {};
var buttonFilter = '*:not(.group-1, .group-3)';
// store filter for each group
var filters = {};
// quick search regex
var qsRegex;
var fcRegex;
// init Isotope
var $grid = $('.member-list').isotope({
itemSelector: '.ml-item',
layoutMode: 'fitRows',
fitRows: {
gutter: 5
},
getSortData: {
name: '.name',
faceclaim: '.faceclaim',
posts: '.posts parseInt',
group: '[data-category]',
lastposted:'[data-id] parseInt',
alias: '.alias'
},
sortAscending: {
name: true,
posts: false,
lastposted: true,
group: true,
faceclaim: true,
alias: true
},
filter: function() {
var $this = $(this);
var searchResult = qsRegex ? $(this).find('.name').text().match( qsRegex ) : true;
var fcResult = fcRegex ? $(this).find('.faceclaim').text().match( fcRegex ) : true;
var buttonResult = buttonFilter ? $this.is( buttonFilter ) : true;
return searchResult && fcResult && buttonResult;
}
});
// bind filter button click
$('.filter-button-group').on( 'click', '.button', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
buttonFilters[ filterGroup ] = $this.attr('data-filter');
// combine filters
buttonFilter = concatValues( buttonFilters );
// Isotope arrange
$grid.isotope();
updateFilterCount();
});
// bind sort button click
$('.sort-by-button-group').on( 'click', 'button', function() {
var sortValue = $(this).attr('data-sort-value');
$grid.isotope({ sortBy: sortValue });
});
// bind filter button click
$('.button').on( 'click', '.button', function() {
var $this = $(this);
// get group key
var $buttonGroup = $this.parents('.button-group');
var filterGroup = $buttonGroup.attr('data-filter-group');
// set filter for group
buttonFilters[ filterGroup ] = $this.attr('data-filter');
// combine filters
buttonFilter = concatValues( buttonFilters );
// Isotope arrange
$grid.isotope();
updateFilterCount();
});
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
}) );
// use value of search field to filter
var $fcsearch = $('.fcsearch').keyup( debounce( function() {
fcRegex = new RegExp( $fcsearch.val(), 'gi' );
$grid.isotope();
}) );
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
});
// flatten object by concatting values
function concatValues( obj ) {
var value = '';
for ( var prop in obj ) {
value += obj[ prop ];
}
return value;
}
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
threshold = threshold || 100;
return function debounced() {
clearTimeout( timeout );
var args = arguments;
var _this = this;
function delayed() {
fn.apply( _this, args );
}
timeout = setTimeout( delayed, threshold );
};
}
它是混乱的(2023年4月2日)或(今天/昨天与时间),并以随机顺序排序。我试过parseDate,然后转移到[data-id] parseInt,这让我最接近。有什么想法从这里去哪里?
1条答案
按热度按时间yvgpqqbh1#
Isotope的getSortData要求值要么是一个快捷字符串,要么是一个回调函数来检索数据。由于日期的格式多种多样,不易解析,因此必须使用回调函数。
下面是一个函数,它应该能够对你给出的例子中的日期进行排序('May 25,2023','Today at 11:22pm','Yesterday at 1:15pm'):
它尝试使用Javascript的
Date()
constructor和Date.parse()
函数来解析日期字符串,沿着使用一些字符串操作来将前导的“Today at”或“Yesterday at”替换为实际日期。它还在结尾的'am'或'pm'之前放置一个空格,因为这是Date.parse()
的要求。我留下了
console.log()
调用,以便您可以看到它所采取的步骤以及成功或失败的地方。将其与
getSortData
对象结合: