WP -在列表中选择帖子的标题时，将帖子的内容加载到空div中

Question

我正在wordpress中构建一个站点，其中的某个部分有一个容器，该容器有一个帖子项目列表(将其视为菜单/侧边栏)，还有一个空白空间，我将在其中加载内容。当你点击帖子列表中的一个标题时，被点击的标题的内容应该加载到空的div中。单击标题列表中的另一个标题。

所以它看起来基本上是这样的：

<div class="container">
  <ul class="cats">
     <?php
       $my_query = new WP_Query('showposts=10&cat=4');
       while ($my_query -> have_posts()) : $my_query->the_post();  $category = get_the_category(); 
     ?>

       <li class="trigger">
         <h5>
           <? the_title(); ?>
         </h5>
       </li>

     <?php 
       endwhile; wp_reset_query(); 
     ?>
  </ul>
  <div class="the-content">
    <? the_content(); ?>
  </div>
</div>

所以，我已经为ajax查找了一些东西，但我没有任何经验。这样做最好的方式是什么呢？

Answer 1

在获取post的同时，您还可以将post内容存储在具有特定于post的id的隐藏div中。例如：

<?php
       $my_query = new WP_Query('showposts=10&cat=4');
       while ($my_query -> have_posts()) : $my_query->the_post();  $category = get_the_category();
echo '<div id="post_' . $my_query->the_post()->id . '" style="display:none;">' . $my_query->the_post()->content . '</div>'; 
 ?>

当你点击特定标题时，可以从隐藏的div中获取相关帖子内容；

<li class="trigger" onclick="showContent(this)" id="post_id">//This id must be the id of post
         <h5>
           <? the_title(); ?>
         </h5>
</li>

和javascript代码；

function showContent(obj) {
    $(".the-content").empty().html($("#" + $(obj).attr('id')).html());
}

希望能有所帮助