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

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 并感到困惑)。

至于悬停问题，我的猜测是您已经在 jQuery 中的 $(document).ready() 上启动了此问题，但是当通过 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); });
});

请记住，您现在必须在 $(document).ready() 中调用 pageInit()!