如何使WordPress的帖子循环和使用jQuery替换HTML输出？

Question

在我的wordpress网站中，我的页面分为3个部分。 每个部分都包含特定类别的帖子。 我使用这个wordpress查询来获取该类别中的最新3个帖子，并将其加载到section（div）中。 因此，对于“小说”部分，我使用以下查询：

<? $novels = get_option('of_novels') ?>
<?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts('category_name=$novels&posts_per_page=3'); ?>
<?php while (have_posts()) : the_post(); ?>
    <div class="sliderunit">
        <?php the_post_thumbnail(); ?>
        <div class="novelsslidertitle">
            <div class="arrow-left"></div>
            <a href="<?php the_permalink(); ?>"><img class="cross" src="<?php bloginfo('stylesheet_directory'); ?>/images/cross.png"/></a>
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            <h3>رواية</h3>
        </div>
    </div>                    
<?php endwhile;?>

这使我获得了#novels类别中的最新3条帖子。 现在，我有一些按钮。 我想写一些jequery在此类别上循环并获取上一个和下一个帖子，并将新的查询内容重新加载到该#novels div中，使用替换html中的旧查询代码

$("<div/>").replaceWith("// Replace with a function to get the code of new output");

在不使用分页和重新加载页面的情况下充当滑块？ 我希望我的问题能得到很好的宣布，我感谢任何有用的线索，链接或参考。

Answer 1

我认为$.replaceWith并不是您真正需要的。 您只需要在用户到达某个点时（可能是当前加载的帖子中的最后一个，或倒数第二个$.ajax() #sliderunit ，然后运行$.ajax()或类似的查询，将其附加到#sliderunit ，它将使这样您就可以继续滚动/滑动。 通过添加而不是替换，可以根据需要来回移动，而不必重新加载任何内容。 如果您担心内存管理，则可以在特定阈值处使用$.remove() 。

如果您需要更多有关此操作的信息，请先添加新数据，然后使用CSS操作（例如$.animate()执行幻灯片效果。 您可以使用图层来隐藏您不想显示的内容，或者我猜您也可以在您不想显示的块上调用$.hide() 。