0

我以前见过一些与此相关的问题，但在砌体脚本中，我不确定我是否走在正确的轨道上。

结果：链接打开一个全新的页面，而我正在尝试将内容加载到 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”方面得到了不好的建议？我听说html5和wordpress 3.5不再使用'rel'了......

任何帮助将不胜感激！

（如果我遗漏了拼图的部分，请告诉我）

4

2 回答 2

2

尝试添加 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');
于 2013-01-08T20:14:45.023 回答
0

@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>
于 2013-01-17T01:46:18.980 回答