我正在使用WordPress短代码来显示自定义帖子。每个简码都包含相同的HTML
和classes
,只是数据发生了变化。
我正在使用同位素load more
分页。这是我的JavaScript
function initIsotope($) {
$container = $('.social-posts-grid').isotope({
itemSelector: '.social-post',
percentPosition: true,
masonry: {
columnWidth: '.grid-sizer',
gutter: 20,
horizontalOrder: true
}
});
$(".iso-filter a").click(function() {
$(this).data('clicked', true);
var filterValue = $(this).attr('data-filter');
$('.social-posts-grid').isotope({
filter: filterValue
});
loadMore(initShow);
});
//****************************
// Isotope Load more button
//****************************
var initShow = script_vars.page_slug === 'social-page' ? 3 : 10; //number of items loaded on init & onclick load more button
var counter = initShow; //counter for load more button
var iso = $container.data('isotope'); // get Isotope instance
loadMore(initShow); //execute function onload
function loadMore(toShow) {
$container.find(".hidden").removeClass("hidden");
var hiddenElems = iso.filteredItems.slice(toShow, iso.filteredItems.length).map(function(item) {
return item.element;
});
$(hiddenElems).addClass('hidden');
$container.isotope('layout');
//when no more to load, hide show more button
if (hiddenElems.length == 0) {
jQuery("#load-more").hide();
} else {
jQuery("#load-more").show();
};
}
//append load more button
$container.after('<button id="load-more" class="social-load-more"> Load More</button>');
//when load more button clicked
$("#load-more").click(function() {
if ($('#filters').data('clicked')) {
//when filter button clicked, set initial value for counter
counter = initShow;
$('#filters').data('clicked', false);
} else {
counter = counter;
};
counter = counter + initShow;
loadMore(counter);
});
}
“加载更多”按钮仅适用于第一个元素。第二个元素什么也没发生