javascript - 动态发布 WordPress 帖子

Question

我已经尝试让这个功能工作很多天了，它快把我逼疯了!

我在 WP 中有一个单页主题，其中一个主题的左侧有一个 div，其中包含网站中的帖子列表，右侧有一个 div，应显示单击的帖子的内容。

我找到了this question和 followed up the linked tutorial并取得了部分成功。

我设法动态地呈现内容，我想要的只是显示，但任务的顺序似乎是错误的。它的作用如下:

1. 我点击了链接。
2. 当前内容消失。
3. 加载范围正确显示。
4. 相同的内容淡入。
5. 大约 1 秒后，当前内容将被新内容替换，并且地址栏根本不会改变。

这是我的代码:

• atracoes.js $(文档).ready(function() {

  var hash = window.location.hash.substr(1);
  var href = $('.controle nav li a').each(function(){
      var href = $(this).attr('href');
      if(hash==href.substr(0,href)){
          var aCarregar = hash+'.html #atr-conteudo';
          $('#atr-conteudo').load(aCarregar)
      }
  });
  
  $('.controle nav li a').click(function() {
  
      var aCarregar = $(this).attr('href')+' #atr-conteudo';
      $('#atr-conteudo').hide('fast',carregarConteudo);
      $('#carregando').remove();
      $('#atracoes').append('<span id="carregando">Carregando...</span>');
      $('#carregando').fadeIn('normal');
  
      window.location.hash = $(this).attr('href').substr(0,$(this).attr('href'));
  
      function carregarConteudo () {
          $('#atr-conteudo').load(aCarregar,'',mostrarNovoConteudo());
      }
      function mostrarNovoConteudo () {
          $('#atr-conteudo').show('normal',esconderCarregando());
      }
      function esconderCarregando () {
          $('#carregando').fadeOut('normal');
      }
  
      return false;
      });
      });
  

• index.php(动态内容部分)

  <div class="main" id="atracoes">
  
      <div class="controle">
  
          <nav>
          <?php
          $args = array( 'posts_per_page' => 20);
  
          $myposts = get_posts( $args );
          foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
              <li>
                  <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
              </li>
          <?php endforeach; 
          wp_reset_postdata();?>
          </nav>
  
      </div>
  
      <div id="atr-conteudo">
  
          <?php the_post_thumbnail(); ?>
          <div id="atr-texto">
              <h2><?php the_title(); ?></h2>
              <?php the_content(); ?>
          </div>
  
      </div>
  
  </div>
  

  • single.php(我用ajax提取的部分)

  <!-- article -->
  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  
      <!-- post thumbnail -->
      <?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
          <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
              <?php the_post_thumbnail(); // Fullsize image for the single post ?>
          </a>
      <?php endif; ?>
      <!-- /post thumbnail -->
  
  
      <div id="atr-texto">
      <!-- post title -->
      <h1>
          <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
      </h1>
      <!-- /post title -->
  
      <?php the_content(); // Dynamic Content ?>
  
      <?php edit_post_link(); // Always handy to have Edit Post Links available ?>
      </div>
  </article>
  

Answer 1

您在将函数传递给 jQuery 执行之前调用这些函数，而不是允许 jQuery 执行它们:

function carregarConteudo () {
    $('#atr-conteudo').load(aCarregar,'',mostrarNovoConteudo);
}
function mostrarNovoConteudo () {
    $('#atr-conteudo').show('normal',esconderCarregando);
}

(请注意，函数名称后面不再有 ())