当前位置: 首页 > 面试题库 >

如何使用Ajax onclick加载Wordpress Post

陈弘厚
2023-03-14
问题内容

我已经花了数小时阅读和尝试教程。我似乎找不到能解决问题的解决方案,我知道它应该很简单,但是我在AJAX方面苦苦挣扎。:(

我想从div中的链接加载发布内容。以下是我所拥有的。有人可以在JavaScript方面帮我吗?谢谢!

<ul>
    <?php query_posts('post_type=artwork&posts_per_page=-1'); ?>
    <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
    <li class="mytab">
      <span>
         <h3><?php the_title(); ?></h3>
         <a href="#"><?php the_post_thumbnail('Project'); ?></a>
      </span>
    </li>
    <?php endwhile; endif; wp_reset_query(); ?>
</ul>

<div id="loadAjaxHere"></div>

我想在div #loadAjaxHere中加载此代码

<div class="myArtwork">
   <h2><?php the_title(); ?></h2>
   <div class="text"><?php the_content(); ?></div>
</div>

感谢您的帮助!!


问题答案:

好的,我认为经过长时间的反复试验,我已经解决了这一问题。

这似乎可行,但是如果这不是正确的方法,请告诉我

Javascript:

jQuery.noConflict();
jQuery(document).ready(function($){
    $.ajaxSetup({cache:false});
    $("a.ajax").click(function(){
        var post_url = $(this).attr("href");
        var post_id = $(this).attr("rel");
        $("#tabs").html('<div class="loading">loading...</div>');
    $("#tabs").load(post_url);
    return false;
    });
});

我要显示帖子内容的页面(我正在使用称为“艺术品”的自定义帖子类型:

<ul class="container">
  <?php query_posts('post_type=artwork&posts_per_page=-1'); ?>
  <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
  <li class="mytab">
    <h3><?php the_title(); ?></h3>
    <a href="<?php the_permalink(); ?>" rel="<?php the_ID(); ?>" class="ajax"><?php the_post_thumbnail('Project'); ?></a>
  </li>
  <?php endwhile; endif; wp_reset_query(); ?>
</ul>

<!-- LOAD SINGLE POST CONTENT IN #TABS -->
<div id="tabs"></div>

和单篇文章“ single-artwork.php”。注意:请勿使用get_header或get_footer等:

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
  <div class="tabcontent" id="tab-<?php the_ID(); ?>">
    <?php the_content(); ?>
  </div>
<?php endwhile; endif; ?>

谢谢!



 类似资料:
  • 问题内容: 我已经在服务器上加载了一个CSS文件,所以我有一个URL。如何使用JQuery将其加载到我的Perl代码中? 所以目前我正在对梅森页面中的css进行硬编码,而该页面中缺少这样的内容 我想避免对此CSS进行硬编码? 问题答案: 我不明白为什么您不能只在该部分中插入元素,但这是一个jQuery代码片段:

  • 问题内容: 我想加载IPython外壳(不是IPython笔记本),可以在其中通过命令行使用PySpark。那可能吗?我已经安装了Spark 1.4.1。 问题答案: 如果使用Spark <1.2,则可以简单地使用环境变量执行。 要么 尽管以上内容仍可在Spark 1.2及以上版本上正常使用,但建议为这些版本设置Python环境的方法是 要么 您可以替换为您选择的解释器的路径。

  • 我是flutter的新手,上周才开始。我正在从在线课程中学习,然后我想在我的flutter应用程序中加载一个图像。但有一个错误是:

  • 问题内容: 我需要检查(使用Javascript)是否已加载CSS文件,如果未加载,则进行加载。jQuery很好。 问题答案: 只需检查一下是否存在一个元素,并将其属性设置为CSS文件的URL: 使用document.styleSheets集合,普通的JS方法也很简单:

  • 问题内容: 我在玩反射,我想做点东西来加载一个类并打印该类中所有字段的名称。我制作了一个小型的hello world类型的类来检查一些东西: 基于以上所述,我得出两个结论: 它存在于/home/kent/eclipsews/SmallExample/bin/IndependentClass.class 有用!(因此它必须是可以由类加载器加载的正确的.class文件) 然后使用反射的代码:(标记导致

  • 问题内容: 是否可以使用Javascript将CSS样式表导入html页面?如果是这样,怎么办? 附言:JavaScript将托管在我的网站上,但我希望用户能够放入其网站的标签,并且它应该能够将托管在我的服务器上的CSS文件导入当前网页。(css文件和javascript文件都将托管在我的服务器上)。 问题答案: 这是这样做的“老派”方法,希望可以在所有浏览器上使用。从理论上讲,不幸的是,您将使用