我正在关注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 -->
最佳答案
我认为这里存在几个不同的问题。首先,您的 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()
!
关于jquery - 如何为 Wordpress WP Page-Navi 插件启用 AJAX,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6595709/