Question

之前我已经看过一些问题，但是在砌砖脚本中，我不确定自己是否走在正确的轨道上。

结果：链接打开一个全新的页面，当我正在尝试将内容加载到div中时。

index.php代码：

<div id="primary" class="site-content">
    <div id="content" role="main">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div id="miniLoader"></div>
    <div class="box">
      <a class="miniLoader" href="<?php the_permalink() ?>">
      <?php if (has_post_thumbnail()) {
        the_post_thumbnail('thumbnail');
      }?>
      <h2><?php the_title(); ?></h2></a>
    </div>
    <?php endwhile; endif; ?>
    <?php get_footer(); ?>

header.php代码：

 <script>
jQuery(document).ready(function($){
    $('#container').masonry({
      itemSelector: '.box',
      });
});
 </script>

 <?php wp_head(); ?>

<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
 <script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup({cache:false});
    $(".miniLoader").click(function(){
    var post_id = $(this).attr("href")
    $("#miniLoader").html("loading...");
    $("#miniLoader").load(post_link);
    return false;
 });

 });

据我所知，放置位于循环中，脚本应该放在适当的位置。还是我得到了关于安置和'rel'的错误建议？我听说不再使用'rel'了html5和wordpress 3.5 ......

非常感谢任何帮助！

（如果我错过了这个难题，请告诉我这个有意义）

Answer 1

尝试添加event.preventDefault（）以禁用正常的链接操作：

$(".miniLoader").click(function(event){
    event.preventDefault();

并且仍然需要设置post_link变量：

var post_id = $(this).attr("href");
var post_link = 'your-api-file.php?id=' + post_id;
$("#miniLoader").html("loading...");
$("#miniLoader").load(post_link);

哦，如果你没有API文件，jQuery实际上只能加载整个WordPress页面，但只显示你想要的元素的内容。在这种情况下，AJAX加载请求只会抓取并显示#content元素中的内容：

$('#miniLoader').load('/?p='+ post_id +' #content');

Answer 2

@hansvedo

经过多次讨论，以下是我解决脚本问题的方法：

$(document).ready(function(){

$.ajaxSetup({cache:false});
$("h1 a").click(function(event){
    event.preventDefault();
    var post_link = $(this).attr("href");
    $("#miniloader").html("loading...");
    $("#miniloader").load(post_link);
return false;
});

});

和索引变更如下：

<div id="miniloader" class="miniloader"></div>

我一直试图在仅加载#content时实现你的提示，但无济于事。看起来没有“内容”ID，但我确实尝试在下面的代码中实现一个：

 <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 <header class="entry-header">
 <h1 class="entry-title"><?php the_title(); ?></h1>
 <div class="entry-meta">
 <?php toolbox_posted_on(); ?>
 </div><!-- .entry-meta -->
 </header><!-- .entry-header -->
 <div class="entry-content" id="content">
 <?php the_content(); ?>
 <?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'toolbox' ), 'after' => '</div>' ) ); ?>
 </div>

使用ajax和masonry javascript将wordpress帖子加载到div中，但是href没有加载到div中

2 个答案: