Question

我正在创建一个博客列表页面，加载更多... ，我遇到了问题。点击/加载后我的整个内容重复，但只有第一页，不重复，只有下一页。如果我打开一个PHP文件，我的内容生成了，它只显示我需要加载的当前页面，例如只有第二页

完整的代码

    <?php 
    $paginationClass = 'otw_portfolio_manager-load-more-newspapper';
    $paginationLoadMore = 'otw_portfolio_manager-load-more-newspapper';

    $uniqueHash = wp_create_nonce("otw_pm_get_posts_nonce"); 
    $listID = $this->listOptions['id'];
    $maxPages = $otw_pm_posts->max_num_pages;

    $paginationPageNo = (int) $_GET['page'];
    //echo $paginationPageNo;
    ($paginationPageNo == 0) ? $page = 2 : $page = $paginationPageNo + 1;
    $ajaxURL = admin_url( 'admin-ajax.php?action=get_pm_posts&post_id='. $listID .'&nonce='. $uniqueHash .'&page='. $page );
?>

    <script>
        $(document).ready(function(){
            $(document).on('click','.show_more',function(){
                var ID = $(this).attr('id');
                $('.show_more').hide();
                $('.loding').show();
                $.ajax({
                    type:'POST',
                    url:'<?php echo $ajaxURL;?>',
                    data:'id='+ID,
                    success:function(html){
                        $('#show_more_main-'+ID).remove();
                        $(".row.works").append(html);
                    }
                }); 
            });
        });
    </script>


<!-- Load More Pagination -->
<div class="js-pagination_container">
    <div class="<?php echo $paginationClass;?> hide">
        <a href="<?php echo $ajaxURL;?>" class="js-pagination-no"><?php echo $page;?></a>
    </div>
    <div id="show_more_main-<?php echo $page;?>" class="<?php echo $paginationLoadMore;?> js-otw_portfolio_manager-load-more">
        <a href="<?php echo $ajaxURL;?>" data-empty="<?php _e('No more items to load.', OTW_PML_TRANSLATION);?>" data-isotope="true" class="show_more"><?php _e('Load More', OTW_PML_TRANSLATION);?></a>
    </div>
</div>
<?php?>
<!-- End Load More Pagination -->
</div>

3次点击最后一次＆＃34;加载更多＆＃34;

后的控制台报告

13:36:29.502 jquery.min.js:4 XHR finished loading: GET ".../wp-admin/admin-ajax.php?action=get_pm_posts&post_id=1&nonce=7452b3a7e4&page=2".
13:36:31.842 jquery.min.js:4 XHR finished loading: POST ".../wp-admin/admin-ajax.php?action=get_pm_posts&post_id=1&nonce=7452b3a7e4&page=2".
13:36:31.905 jquery.min.js:4 XHR finished loading: GET ".../wp-admin/admin-ajax.php?action=get_pm_posts&post_id=1&nonce=7452b3a7e4&page=3".
13:36:31.936 jquery.min.js:4 XHR finished loading: POST ".../wp-admin/admin-ajax.php?action=get_pm_posts&post_id=1&nonce=7452b3a7e4&page=3".
13:36:36.333 jquery.min.js:4 XHR finished loading: GET ".../wp-admin/admin-ajax.php?action=get_pm_posts&post_id=1&nonce=7452b3a7e4&page=4".
13:36:36.380 jquery.min.js:4 XHR finished loading: POST ".../wp-admin/admin-ajax.php?action=get_pm_posts&post_id=1&nonce=7452b3a7e4&page=2".
13:36:36.585 jquery.min.js:4 XHR finished loading: POST ".../wp-admin/admin-ajax.php?action=get_pm_posts&post_id=1&nonce=7452b3a7e4&page=3".
13:36:36.929 jquery.min.js:4 XHR finished loading: POST ".../wp-admin/admin-ajax.php?action=get_pm_posts&post_id=1&nonce=7452b3a7e4&page=4".
13:36:36.982 jquery.min.js:4 XHR finished loading: POST ".../wp-admin/admin-ajax.php?action=get_pm_posts&post_id=1&nonce=7452b3a7e4&page=3".

我在wordpress中创建了这个功能

Answer 1

现在我更新并将我的jquery从php移开，现在我看到它重复了多少次，以及它是如何工作的

这是我的模板

<div class="row works">
    <?php  foreach( $otw_pm_posts->posts as $post ){

        echo $this->buildInterfacePortfolioItems( $post ); ?>
        <?php echo $this->getSocial( $post ); ?>
        <?php echo $this->getDelimiter( $post ); ?>
    <?php }?>

    <?php 
    $paginationClass = 'otw_portfolio_manager-load-more-newspapper';
    $paginationLoadMore = 'otw_portfolio_manager-load-more-newspapper';

    $uniqueHash = wp_create_nonce("otw_pm_get_posts_nonce"); 
    $listID = $this->listOptions['id'];
    $maxPages = $otw_pm_posts->max_num_pages;

    $paginationPageNo = (int) $_GET['page'];
    //echo $paginationPageNo;
    ($paginationPageNo == 0) ? $page = 2 : $page = $paginationPageNo + 1;
    $ajaxURL = admin_url( 'admin-ajax.php?action=get_pm_posts&post_id='. $listID .'&nonce='. $uniqueHash .'&page='. $page );
?>

    <script>
        $(document).ready(function(){
            loadMore();
        });
    </script>


<!-- Load More Pagination -->
<div class="js-pagination_container">
    <div class="<?php echo $paginationClass;?> hide">
        <a href="<?php echo $ajaxURL;?>" class="js-pagination-no"><?php echo $page;?></a>
    </div>
    <div class="<?php echo $paginationLoadMore;?> js-otw_portfolio_manager-load-more">
        <a href="<?php echo $ajaxURL;?>" data-empty="<?php _e('No more items to load.', OTW_PML_TRANSLATION);?>" data-isotope="true" class="show_more"><?php _e('Load More', OTW_PML_TRANSLATION);?></a>
    </div>
</div>

<?php?>
<!-- End Load More Pagination -->
</div>

现在这是我的jQuery

function loadMore(){
    $(document).on('click','.show_more', 'a' ,function(e){
        var post = $(this).attr('href');
        $('.show_more').hide();
        $('.loding').show();
        $.ajax({
            type:'POST',
            url:post,
            success:function(html){
                $(html).insertAfter(".row.works");
            }
        }); 
        e.stopPropagation();

    });
}

它是如何重复的 1.点击 - 显示第二页
2.单击 - 复制第三页的3次
3.单击 - n次复制第四页和包含第二和第三页内容的内容

ajax jquery - 加载后复制内容

1 个答案: