Question

我正在关注如何针对我正在制作的Pippin Williamson's tutorial进行AJAX wordpress分页的kids toys site。

使用以下javascript：

jQuery(document).ready(function(){
    jQuery('.pagination_container a').live('click', function(e)  {
    e.preventDefault();
    var link = jQuery(this).attr('href');
    jQuery('.content').fadeOut(500).load(link + '.content .prodlist_container', function() {
    jQuery('.content').fadeIn(500); });
    });
});

...我设法让分页工作但遇到了以下问题：

加载分页页面的延迟很长（考虑到小图像大小）
所有产品图片都奇怪地被赋予了悬停状态（蓝色图形）
分页按钮不再正常工作。

任何建议/建议都值得赞赏，因为我已经开了一段时间。

以下是有帮助的HTML / PHP：

<div class="content">


        <div class="breadpage_container group">

            <div id="breadcrumb_container">


            </div><!-- end breadcrumb_container -->

            <div class="pagination_container">


            </div><!-- end pagination container -->

        </div><!--end breadpage_container -->

        <div class="prodlist_container">

            <ul class="products group">

            <!-- loop to show products list -->

            <?php $args = array(
                'post_type' => 'products',
                'orderby' => 'title',
                'order' => 'DES',
                'posts_per_page' => 8,
                'paged' => get_query_var ('page'),
                'post_parent' => $parent
                ); ?>

            <?php query_posts($args); ?>

            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

                <li>

                    <a href="<?php the_permalink() ?>" class="product_image">
                        <?php echo get_post_meta($post->ID, 'ProductImage', true);?>
                        <span class="overlay"></span>
                    </a>

                    <h3 class="product_tit"><a href="<?php the_permalink() ?>"><?php the_title();?></a></h3>
                    <p class="price_tag"><?php echo get_post_meta($post->ID, 'ProductPrice', true); ?></p>

                </li>   

            <?php endwhile; ?>

            <?php else :?>

                <p>There are no products to display</p>

            <?php endif; ?>


            </ul>   



        <div class="breadpage_container group" id="lower_breadpage_container">

            <div class="pagination_container">

                <?php wp_pagenavi(); ?>

                <?php wp_reset_query(); ?>                  

            </div><!-- end pagination container -->

        </div><!--end breadpage_container -->   

        </div><!-- prodlist_container -->   


</div><!-- end content -->

Answer 1

我认为这里有几个不同的问题。首先，您的load()函数看起来有一个小错误。加载页面片段时，您需要传入URL后跟选择器，但您的字符串在URL和选择器之间没有空格。它应该是：

jQuery('.content').fadeOut(500).load(link + ' .content .prodlist_container', function() {

这应该解决缓慢加载和分页问题（此时它可能正在尝试解析一堆.prodlist_container div并且感到困惑。）

至于悬停问题，我的猜测是你在$(document).ready()的jQuery中启动了这个，但是当通过AJAX加载页面片段时不会触发。你可能不得不将你目前在$(document).ready()下获得的东西添加到页面启动函数中，并在load()完成时调用它，如下所示：

jQuery('.content').fadeOut(500).load(link + ' .content .prodlist_container', function() {
    pageInit(); // New function with content of $(document).ready()
    jQuery('.content').fadeIn(500); });
});

请记住，您现在必须在pageInit()拨打$(document).ready()！

Answer 2

@ JunkMyFunk代码略有改动的版本为我做了诀窍：

//AJAX PAGINATION
jQuery('.wp-pagenavi a').on('click', function(e){
    e.preventDefault();
    var link = $(this).attr('href');
    jQuery('#property-results').load(link + ' #property-results', function() {
        jQuery('#property-results').fadeIn(500);
    });
});

Answer 3

对我来说，图片加载速度足够快，但延迟可能是因为你加载了jquery分页插件，这可能会增加几秒钟。

我认为，对于胡佛问题，您需要在每次加载新页面时重置事件，因为＆lt; li>当你执行$（document）.ready（）..

时，第二页和第三页都没有加载

1,2,3分页按钮对我来说很好，但＆gt;＆gt;在第二页停止。每次加载新页面时都需要更新该按钮中的href，但我不知道该分页插件是如何工作的......

如何为Wordpress WP Page-Navi插件启用AJAX

3 个答案: