我试图让我的同位素帖子页面使用加载更多按钮(如下所示:https://codepen.io/bebjakub/pen/jWoYEO)。我有代码在Codepen上工作,但我无法在网站上工作。
工作Codepen(我的(过滤和加载更多) - https://codepen.io/whitinggg/pen/qyvVwz
实时页面链接 - Here
我目前在控制台中看到有关我的isotope.js文件的错误:
Uncaught TypeError: Cannot read property 'filteredItems' of undefined
at loadMore (isotope.js?v=2.2.7:53)
at HTMLDocument.<anonymous> (isotope.js?v=2.2.7:48)
at i (jquery.js?ver=1.12.4:2)
at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
at Function.ready (jquery.js?ver=1.12.4:2)
at HTMLDocument.K (jquery.js?ver=1.12.4:2)
任何人都可以帮助解决此错误的含义吗?请帮我解决一下。
我的Isotope.js文件
jQuery(function ($) {
// with jQuery
var $container = $('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'packery',
columnWidth: '.grid-sizer',
packery: {
gutter: '.gutter-sizer'
}
});
//Add the class selected to the item that is clicked, and remove from the others
var $optionSets = $('#filters'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('#filters');
$optionSets.find('.selected').removeClass('selected');
$this.addClass('selected');
//When an item is clicked, sort the items.
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector });
return false;
});
// layout Isotope after each image loads
$container.imagesLoaded().progress( function() {
$container.isotope('layout');
});
//****************************
// Isotope Load more button
//****************************
var initShow = 15; //number of items loaded on init & onclick load more button
var counter = initShow; //counter for load more button
var iso = $container.data('grid'); // 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"> 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);
});
//when filter button clicked
$("#filters").click(function() {
$(this).data('clicked', true);
loadMore(initShow);
})
});
它为什么在codepen上工作的问题在我的网站上没有,结果证明是一个简单的问题。不记得我为什么现在这样做了,但是我已经从Codepen略微改变了一行代码,这似乎引起了这个问题。那条线是:
var iso = $container.data('grid'); // get Isotope instance
本来应该:
var iso = $container.data('isotope'); // get Isotope instance
问题在于这一行。
var iso = $container.data('grid'); // get Isotope instance
when you print iso it will give you undefined value.
根据我的理解,所有代码都很好。我试过同样的样品工作正常。
var iso = $container.data('isotope');
使用默认功能后,对我来说没问题。如果你尝试console.log(iso);然后它会打印对象。
希望这会有所帮助。