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

【问题标题】：Conditional Multiple Infinite Scroll Instances有条件的多个无限滚动实例
【发布时间】：2021-01-25 06:17:44
【问题描述】：

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

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

$(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)

});

}
    }());
});

【问题讨论】：

标签： jquery infinite-scroll

【解决方案1】：

以防万一有人需要它，我用一个无限滚动实例解决了它，并在下一个类别链接中包含了条件。

 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>';
        
        }

【讨论】：