有条件的多个无限滚动实例

Question

我有一个无限滚动加载下一个类别的产品类别页面。这工作正常，但有些类别有多个页面，因此这些类别应该在加载下一个类别之前加载下一页。代码可以正常加载下一个类别，但不会在多页类别出现时加载下一页。如果您处于多页类别中，代码将加载下一页，但随后它将停止工作。

这是我到目前为止所做的代码：如果下一页存在，我设置了一个条件，运行页面无限滚动并在最后一个时重新启动功能，如果不存在，运行类别无限滚动, 并在完成后重新启动函数。

$(document).ready(function(){
    (function foo() {

if ($('.page-numbers').length){

var $container = $('#main').infiniteScroll({
    path: ".page-numbers a.next",
    hideNav: ".woocommerce-pagination",
    append:  "#main ul.products",
    status: '.page-load-status',
    prefill: true,
    debug: true,
});

$container.on( 'history.infiniteScroll', function() {
  ga( 'set', 'page', location.pathname );
  ga( 'send', 'pageview' );
});


$container.on( 'last.infiniteScroll', function( event, response, path ) {   
    foo.call(this)
});

    } else {

var nextURL;

function updateNextURL( doc ) {
  nextURL = $( doc ).find('.tax-pages a.next').attr('href');
}
// get initial nextURL
updateNextURL( document );

var $container2 = $('#main').infiniteScroll({
  // use function to set custom URLs
    path: function() {
    return nextURL;
    },
    hideNav: ".tax-pages",
    append:  ".products-wrap",
    status: '.page-load-status',
    debug: true,
    prefill: true,
});

// update nextURL on page load
$container2.on( 'load.infiniteScroll', function( event, response ) {
  updateNextURL( response );
});

$container2.on( 'history.infiniteScroll', function() {
  ga( 'set', 'page', location.pathname );
  ga( 'send', 'pageview' );
    foo.call(this)

});

}
    }());
});

Answer 1

以防万一有人需要它，我用一个 infinitescroll 实例解决了它，并将条件包含在下一类别中 link。

JS

 var nextURL;

function updateNextURL( doc ) {
  nextURL = $( doc ).find('.tax-pages a.next').attr('href');
}
// get initial nextURL
updateNextURL( document );

var $container2 = $('#main').infiniteScroll({
  // use function to set custom URLs
    path: function() {
    return nextURL;
    },
    hideNav: ".tax-pages",
    append:  ".products-wrap",
    status: '.page-load-status',
    debug: true,
    prefill: true,
});

// update nextURL on page load
$container2.on( 'load.infiniteScroll', function( event, response ) {
  updateNextURL( response );
});

$container2.on( 'history.infiniteScroll', function() {
  ga( 'set', 'page', location.pathname );
  ga( 'send', 'pageview' );
});

PHP：我将此代码添加到 this function。

if ( $next_term ) 
    
$next_link = get_next_posts_link();

if ($next_link){

        $link[] = '<div class="tax-pages"> <a class="next" href="' . get_next_posts_page_link() . '">Next</a></div>';
        
        } else {
            
            
        $link[] = '<div class="tax-pages"> <a class="next" href="' . esc_url( get_term_link( $next_term ) ) . '">' . $next_term->name . '</a></div>';
        
        }

有条件的多个无限滚动实例

Conditional Multiple Infinite Scroll Instances

jquery

infinite-scroll