我正在建立一个单页网站，这意味着所有链接都需要动态调用帖子内容。我发现this tutorial 在StackOverflow的一些人的帮助下，我成功地创建了这样的页面。
但当我需要在一个页面中创建一组动态库时，一个新的挑战出现了。所以这里需要做的是：有一个帖子标题列表，每个标题中都有图库。当我点击其中一个链接时，带有缩略图的帖子应该显示在它的正下方。我很好地做到了这一点，但当单击缩略图时，较大的版本应该会出现在旁边。我应用了相同的代码，但它根本不起作用！
这是我目前掌握的代码：
索引。php（图库部分）
have\\u posts（））：$最近->the\\u post（）；？>
<div class="main" id="galeria">
<div class="controle">
<h1>A Galeria</h1>
<nav id="galerias">
<?php $args = array(\'post_type\'=>\'galeria\');
$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 id="thumbnails">
</div>
</div>
<div id="conteudo-galeria">
<div id="texto-galeria">
</div>
</div>
</div>
缩略图。php（打开缩略图。正在工作。）
$(document).ready(function() {
var hash = window.location.hash.substr(1);
var href = $(\'#galerias li a\').each(function(){
var href = $(this).attr(\'href\');
if(hash==href.substr(0,href.length)){
var aCarregar = \'hash+.html #itens\';
$(\'#thumbnails\').load(aCarregar)
}
});
$(\'#galerias li a\').click(function() {
var aCarregar = $(this).attr(\'href\')+\' #itens\';
$(\'#thumbnails\').hide(\'fast\',carregarConteudo);
$(\'#carregando\').remove();
$(\'#thumbnails\').append(\'<span id="carregando">Carregando...</span>\');
$(\'#carregando\').fadeIn(\'normal\');
window.location.hash = $(this).attr(\'href\').substr(0,$(this).attr(\'href\').length);
function carregarConteudo () {
$(\'#thumbnails\').load(aCarregar,\'\',mostrarNovoConteudo);
}
function mostrarNovoConteudo () {
$(\'#thumbnails\').show(\'normal\',esconderCarregando);
}
function esconderCarregando () {
$(\'#carregando\').fadeOut(\'normal\');
}
return false;
});
});
galeria。php（添加缩略图以显示图像。不起作用）
$（文档）。就绪（函数（）{
var hash = window.location.hash.substr(1);
var href = $(\'#itens a\').each(function(){
var href = $(this).attr(\'href\');
if(hash==href.substr(0,href.length)){
var aCarregar = \'hash+.html #conteudo-galeria\';
$(\'#conteudo-galeria\').load(aCarregar)
}
});
$(\'#itens a\').click(function() {
var aCarregar = $(this).attr(\'href\')+\' #conteudo-galeria\';
$(\'#conteudo-galeria\').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\').length);
function carregarConteudo () {
$(\'#conteudo-galeria\').load(aCarregar,\'\',mostrarNovoConteudo);
}
function mostrarNovoConteudo () {
$(\'#conteudo-galeria\').show(\'normal\',esconderCarregando);
}
function esconderCarregando () {
$(\'#carregando\').fadeOut(\'normal\');
}
return false;
});
}）；
我的名字。php（图库中的图像页面）
<?php get_header(); ?>
<!-- Main -->
<div class="main">
<div id="conteudo-galeria">
<div id="texto-galeria">
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<!-- imagem -->
<?php if ( wp_attachment_is_image( $post->id ) ) : $att_image = wp_get_attachment_image_src( $post->id, "full"); ?>
<img src="<?php echo $att_image[0];?>" width="<?php echo $att_image[1];?>" height="<?php echo $att_image[2];?>" alt="<?php $post->post_excerpt; ?>" />
<?php else : ?>
<a href="<?php echo wp_get_attachment_url($post->ID) ?>" title="<?php echo wp_specialchars( get_the_title($post->ID), 1 ) ?>"><?php echo basename($post->guid) ?></a>
<?php endif; ?>
<!-- /imagem -->
<?php endwhile; ?>
<?php else: ?>
<?php endif; ?>
</div>
</div>
</div>
<!-- /Main -->
<?php get_footer(); ?>
哇，这太长了。谢谢你，如果你有耐心一直关注到这里。当前，如果单击缩略图，我将被定向到图像。php。
注：js也应该让历史成为现实，但事实并非如此。现在这不是一个优先事项，但如果你们知道如何修复它，我们将不胜感激。
最合适的回答,由SO网友:GuiHarrison 整理而成
我（部分）解决了这个问题！
由于正在监视事件的内容只有在第一个ajax启动后才加载，所以第二个ajax不知道在哪里查找它。问题是，jQuery中有新的监视事件的方法，完全解决了这个问题。这个on(\'click\'... 处理程序监视指定父级内的任何元素。因此，第二个js文件（galeria.js）应该如下所示：
$(document).ready(function() {
$(\'#thumbnails\').on(\'click\',\'a\', function(event) {
var aCarregar = $(event.target).attr(\'href\')+\' #texto-galeria\';
$(\'#texto-galeria\').fadeOut(\'fast\',carregarConteudo);
$(\'#carregando\').remove();
$(\'#conteudo-galeria\').append(\'<span id="carregando">Carregando...</span>\');
$(\'#carregando\').fadeIn(\'normal\');
window.location.hash = $(this).attr(\'href\').substr(0,$(this).attr(\'href\').length-5);
function carregarConteudo () {
$(\'#texto-galeria\').load(aCarregar,\'\',mostrarNovoConteudo);
}
function mostrarNovoConteudo () {
$(\'#texto-galeria\').fadeIn(\'normal\',esconderCarregando);
}
function esconderCarregando () {
$(\'#carregando\').fadeOut(\'normal\');
}
return false;
});
});
然而，加载时父级需要在页面中（不能是动态的），所以我不得不更改
#itens 到
#thumbnails.
我说部分解决了，因为尽管ajax现在正在工作，但图像没有显示在div上。I\'ve posted a new question here 如果你能帮我的话。
非常感谢。
