jquery - 使用同位素过滤和 InfiniteScroll 加载重复页面/内容

Question

首先，我是一名 PHP 和 Javascript 新手，有人帮助我创建了这段代码，以便我使用 Wordpress。我遇到的问题是，当它到达底部时，它会加载一组重复的帖子。我已经搜索了 hi 和 low 来寻找代码可能存在问题的指示。

加载帖子类型的 PHP。

<?php
$paged = isset($_REQUEST['page'])?$_REQUEST['page']: 1;
$args = array('post_type' => 'wpsc-product', 'posts_per_page' => 24, 'post_status' =>      'publish', 'paged' => $paged, 'orderby' => 'title','order' => 'ASC' );  
if($search) {
$productIds = $wpdb->get_col("select DISTINCT ID from {$wpdb->posts} where post_type =      'wpsc-product' AND post_title  LIKE '%".$search."%' ");
 $args{'post__in'} = ($productIds)?$productIds:'no-data';
}
?>
<div id="container">
<?php       
$loop = query_posts( $args ); 
if( have_posts()) {
 while ( have_posts() ) : the_post();  
//wpsc_the_product_permalink().
$wpsc_product_category = get_the_product_category($post->ID);
$temporary = '';
$classname = '';
if($wpsc_product_category):
foreach($wpsc_product_category  as $value) {
$ParentCategory = $tempParentStorage["{$value->parent}"];
$temporary .= "{$value->slug} ";
$classname .= ($ParentCategory)? " $ParentCategory {$value->slug} ":" {$value->slug}";
}
endif;
?>

<div style='display:none' class="products<?php echo $classname; ?>" data-symbol="<?php     the_title(); ?>" data-category="<?php echo $temporary; ?>" ><a href="<?php echo          wpsc_the_product_permalink(); ?>" > 
<p><?php echo get_the_post_thumbnail($post->ID, 'medium'); ?></p>
<p class='product_title' ><?php the_title(); ?></p>
 </a>    
 </div>

 <?php 
 endwhile;
?>  
 </div><!--//container-->   


<?php if(!$search) { ?>
<div id='page_nav' >
<a href='?page=2'></a>
 </div>
 <?php } ?>
 <?php }
 else {
echo '<div class="products>No Product found</div>';
 }
$totalPages = $wp_query->max_num_pages;
wp_reset_query();   
?>

这是迄今为止的 JavaScript 代码:

    <script language='javascript' >
    jQuery(function($){
   //IMPLEMENTING THE ISOTOPE PLUGIN
// modify Isotope's absolute position method
 var $container = $('#container');

var $optionSets = $('#options .option-set'),
$optionLinks = $optionSets.find('a');

 $optionLinks.click(function(){
    var $this = $(this);

    if ( !$this.hasClass('iam_child_category') ) {
        if(!$this.hasClass('iam_child_of_child_category')) {
              $('.child_filters li').removeClass('child_active_class').addClass('child_inactive_class');
              $('.iam_child_category').removeClass('selected');
        }
    }

    if ( !$this.hasClass('iam_child_of_child_category') ) {
      $('.child_filters_child li').removeClass('child_active_class').addClass('child_inactive_class');
      $('.iam_child_of_child_category').removeClass('selected');
    }

    // don't proceed if already selected
    /*if ( $this.hasClass('selected') ) {
      return false;
    }*/

    var $optionSet = $this.parents('.option-set');
    $optionSet.find('.selected').removeClass('selected');
    $this.addClass('selected');

    // filter items when filter link is clicked
    var selector = $(this).attr('data-filter');

    $(selector + '_child_li').removeClass('child_inactive_class').addClass('child_active_class');

    if(selector == '*') {
        $('.products').css('visibility','visible').hide().delay(200).fadeIn('slow');
    }
    else {
        $('.products').hide();
        $(selector).css('visibility','visible').hide().delay(200).fadeIn('slow');
    }
    return false;

 });



var currentPage = 1;
var lastPage = (<?php echo $totalPages; ?> == 0)?1:<?php echo $totalPages; ?>;   

//call the Infinite Scroll plugin via jQuery

$container.infinitescroll({
    navSelector  : '#page_nav',    // selector for the paged navigation 
    nextSelector : '#page_nav a',  // selector for the NEXT link (to page 2)
    itemSelector : '.products',     // selector for all items you'll retrieve
    loading: {
        finishedMsg: 'No more products to load.',
        img: '<?php bloginfo('template_directory') ?>/images/ajax-loader.gif',
        msgText : 'Loading...'

      }
    },



    function( newElements ) {
      currentPage++;            
      if(currentPage == lastPage) { 
        jQuery(window).unbind('.infscr');   
        return false;
      }

      // hide new items while they are loading
      var $newElems = $( newElements ).css({ opacity: 0 });
      // ensure that images load before adding to Isotope layout
      $newElems.imagesLoaded(function() {
        // show elems now they're ready
        $newElems.animate({ opacity: 1 });
        $container('.insert', $newElems );
      });
    }
);

 });


//IMPLEMENTING THE INVIEW PLUGIN

jQuery(document).on("inview", ".products", function(e) {

  $("#container .products").each(function(e) {
    var $this = $(this);
    if(!$this.hasClass('loaded')) {
        $this.addClass('loaded');
        $this.css('visibility','visible').hide().delay(1*e).fadeIn('medium');

    }
   });

});
 </script>

Answer 1

没关系。我想到了。我需要在阅读设置中指定我的“帖子页面”。