我让它在测试网站上工作,当我访问现场WordPress网站时,它根本无法工作。一切都在页面上正确加载。我确保所有脚本都在我的网站的头部,他们是。我已经尝试了很多东西让它在现场网站上运行但还没有让它工作。我需要在所有帖子加载后加载同位素,所以我认为使用imageLoaded.js可能会有所帮助。我试图使用同位素js加载复选框后过滤帖子。 The site page which I am having the issue on
如果有人能给我一个更好的方法,我会很感激。我会感激所有的帮助。我很难过。
这是同位素定制js:
(function($) {
$(window).load(function() {
var $container = $('#expertsPeople'),
$checkboxes = $('#filters input');
// if on page with filters
if ($container.length && $checkboxes.length) {
$container.imagesLoaded( function(){
$container.isotope({
itemSelector: '.grid-item',
transformsEnabled: false
});
});
$checkboxes.change(function(){
var filters = [];
// get checked checkboxes values
$checkboxes.filter(':checked').each(function(){
filters.push( this.value );
});
filters = filters.join('');
$container.isotope({ filter: filters });
if(!$container.data('isotope').$filteredAtoms.length){
$('#noresults').show();
} else {
$('#noresults').hide();
}
});
// reset all filters
var filterurl = location.search.replace(/^\?/,'').split(/\&/);
for(var i = 0; i < filterurl.length; i++){
var ent = filterurl[i].split(/\=/);
if(ent[0].match(/^filter_\d+$/)){
$('#' + ent[0]).attr('checked', true);
}
}
$checkboxes.change();
// reset all filters
$("#filter-head a").click(function(){
$container.isotope({filter: '*'});
$checkboxes.filter(':checked').each(function(){
$(this).attr('checked', false);
});
$('#noresults').hide();
return false;
});
}
});
})(jQuery);
以下是帖子项目的示例:
<div id="expertsPeople" class="noscript" aria-live="polite" aria-atomic="true">
<article id="post-44980" class="grid-item experts-box education mathematics">
<div class="entry-content">....</div>
</article>
<article id="post-44978" class="grid-item experts-box biomedicine-health">
<div class="entry-content">....</div>
</article>
</div>
以下是复选框列表的示例:
<div class="filter-group" data-filter-group="cat8">
<ul class="experts-tags">
<li><input type="checkbox" id="agriculture" class="filter-cb" value=".agriculture"><label for="agriculture"> Agriculture</label>
</li>
</ul>
</div>