jQuery无限滚动中的砖石回调在Wordpress中不起作用--无限滚动插件也不起作用
我有大量的问题围绕着砖石和无限滚动的组合在Wordpress，即在这页上。
据我所知，要让砖石与无限滚动一起工作，需要在无限滚动jQuery代码中进行回调--这似乎已经建立得很好了。但是，在非常特殊的情况下，我似乎只能在Wordpress站点上进行无限滚动，并且考虑到这些情况，我不知道如何集成砖石。
此代码是从Masonry.js网站的无限滚动演示中借用的，现在在页脚中：
<script>
$(function(){
var $container = $('.et_pb_blog_grid_wrapper');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.post',
columnWidth: 100
});
});
$container.infinitescroll({
navSelector : '#nextposts', // selector for the paged navigation
nextSelector : '#nextposts a', // selector for the NEXT link (to page 2)
itemSelector : '.post', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://dearjackalope.com/juliaproblems/wp-content/themes/juliamariani/images/ajax-loader.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
</script>问题是，即使它在静态HTML中工作，在这个页面上它没有任何效果，我也不知道为什么！最有效的办法是：
<script>
var infinite_scroll = {
loading: {
img: "<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif",
msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
},
"nextSelector":"#nextposts a",
"navSelector":"#nextposts",
"itemSelector":".post",
"contentSelector":".et_pb_blog_grid_wrapper"
};
jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
</script>但我不知道该如何添加砖石式回调--在回调中声明变量的方式与此非常不同(我知道美元符号是在jQuery中定义的，它出现在回调中，而不是出现在原始代码中--我不确定这是否重要？)，而且我也不确定函数的确切位置。我试过：
<script>
var infinite_scroll = {
loading: {
img: "<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif",
msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
},
"nextSelector":"#nextposts a",
"navSelector":"#nextposts",
"itemSelector":"article.post",
"contentSelector":".et_pb_blog_grid_wrapper"
},
// hide new items while they are loading
var $newElems = jQuery(newElements).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
};
jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
</script> 现在，宣布一个新函数：
<script>
var infinite_scroll = {
loading: {
img: "<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif",
msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
},
"nextSelector":"#nextposts a",
"navSelector":"#nextposts",
"itemSelector":"article.post",
"contentSelector":".et_pb_blog_grid_wrapper"
});
};
jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
function newElements() // hide new items while they are loading
var $newElems = jQuery(newElements).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
</script>这两种方法都不起作用，所以我不知道我应该把回调放在哪里，或者说原始代码中是否有什么东西意味着回调不能工作。我花了大约8个小时阅读Javascript教程和文档，我不知道下一步该尝试什么。:(
有一个现在-不支持，但仍然被广泛使用的插件，称为无限-滚动，其中包括一个复选框‘砌体模式’，但当我尝试安装它时，我什么也没有得到-它似乎没有加载任何代码到页面，所以这似乎不是一个选项。值得注意的是，我还发现Jetpack无限滚动功能，即使在完全设置了它的主题之后，也没有将任何代码加载到页面中，因此我似乎仅限于这里的非插件代码。
我的主题有什么根本问题导致了所有这些问题吗？我的Javascript充其量是初级水平，我真的很难知道从这里到哪里-任何帮助都将是非常感谢的。
Stack Overflow用户
发布于 2014-08-24 17:53:04
好的，看起来整个问题都源于这样一个事实，即Wordpress不把$理解为jQuery变量，因为它的默认排队版本的jQuery是在无冲突模式下运行的。
将所有'$‘符号替换为'jQuery’可以解决这个问题，或者您可以将它封装在一个函数中，然后像这样将它映射到$- http://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/。
我不知道我是怎么错过这个的，但是如果其他人在Wordpress上有无限滚动操作的困难，它在困惑了几个小时为什么不起作用之后，效果就像一种魅力！
https://stackoverflow.com/questions/25457871
复制相似问题
腾讯云开发者
