Question

我一直试图让这个功能工作很多天，这让我疯了！

我在WP中有一个单页主题，其中一个在左边有一个div，其中有一个站点和右侧的帖子列表，一个应显示所点击帖子内容的div。 / p>

我找到this question和followed up the linked tutorial，但部分成功。

我设法将内容带来了恐怖，我想要的只是显示，但似乎任务的顺序是错误的。下面是它的表现：

我点击链接。
目前的内容消失了。
加载范围正确显示。
相同内容淡入。
1秒左右后，当前内容将被新内容替换，地址栏根本不会改变。

这是我的代码：

atracoes.js $（document）.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); }

（注意它们在函数名称之后不再有()

动态地发布WordPress帖子

1 个答案: