jQuery無限滾動中的砌體回調在Wordpress中不起作用-也不是無限滾動插件

Question

在Wordpress中，即在此頁面上 ，圍繞砌築和無限滾動的組合，我遇到了很多問題。

我收集到使Masonry與無限滾動一起工作的需要在無限滾動jQuery代碼內進行回調-這似乎是行之有效的。 但是，在非常特殊的情況下，我似乎只能在Wordpress網站上進行無限滾動，並且在這種情況下，我不確定如何集成Masonry。

此代碼是從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>

但是我不確定如何向其中添加Masonry回調-回調中聲明變量的方式與此完全不同（我知道美元符號是在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教程和文檔，但不確定下一步該怎么做。 :(

有一個現在不被支持但似乎仍被廣泛使用的名為Infinite-Scroll的插件，其中包含一個“ Masonry Mode”復選框，但是當我嘗試安裝它時卻一無所獲-似乎沒有將任何代碼加載到頁面，因此這里似乎沒有選擇。 可能值得注意的是，即使為主題完全設置了主題，我也發現Jetpack的無限滾動功能沒有在頁面中加載任何代碼，因此我似乎僅限於此處的非插件代碼。

我的主題是否存在引起所有這些問題的根本錯誤？ 我的Java語言充其量只是初學者級別，我真的很想知道從這里開始應該去哪里-任何幫助將不勝感激。

Answer 1

好的，所以看起來這整個問題源於以下事實：Wordpress無法將$理解為jQuery變量，因為其默認排隊版本的jQuery在無沖突模式下運行。

將所有'$'符號替換為'jQuery'可解決問題，或者您可以將其包裝在函數中並將其映射到$，這就是我所做的-http://digwp.com/2011/09/using-代替jQuery在WordPress中/

不知道我是怎么想念這個的，但是如果其他人很難在Wordpress中使用無限滾動功能，那么在經過數小時的困惑之后，它就像是一種魅力！

Answer 2

如果這對其他人有幫助，我會嘗試將函數添加到infinite_scroll js變量中而陷入困境。 像這樣添加它可以正常工作：

var infinite_scroll = {
    loading: {
        img: "<?php echo get_template_directory_uri(); ?>/library/images/ajax-loader.gif",
        msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
        finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
    },
    "nextSelector":".pagination .next",
    "navSelector":".pagination",
    "itemSelector":".infinite-scroll-post",
    "contentSelector":"#infinite-scrollable",
    "debug":true
}
jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll,function(arrayOfNewElems){
    picturefill({ reevaluate: true });
} );