使用jquery将wordpress链接加载到div中

Question

我试图让我的 WordPress 链接加载到 div 中而不是刷新页面。已经在网上尝试了一些教程，但它们似乎不起作用（或不完全），

我自己的试用每次只拉出我的最后一篇文章（它确实加载到 div 中，但它不会生成其他帖子，然后是最后一篇，所以所有我点击链接转到同一篇文章，

有人知道为什么这不起作用吗

？

<?php while (have_posts()) : the_post(); ?>

    <div class="WZ-OVER-wereldTitle">
    <a href="<?php the_permalink(); ?>" rel="<?php the_ID(); ?>">
    <?php the_title(); ?>
    </a>
    </div>


<script>
    $(document).ready( function() {
        var postID = $('.WZ-OVER-wereldTitle a').attr('rel');
        $('.WZ-OVER-wereldTitle a').click( function() {
            event.preventDefault();
            $('#content').html('loading...');
            $('#content').load('http://www.weetzelf.nl/?p=' + postID);
            return false;
        });
    });

</script>

<?php endwhile; ?>

Answer 1

您正在尝试使用 .load 加载外部（跨域）请求。这是行不通的。

替代方案：使用 James Padolsey 插件 然后调用它。这仅适用于 jquery1.4.4

演示： http://jsfiddle.net/YErfj/

Answer 2

你做错的主要事情是在这里：

$('#content').load('http://www.weetzelf.nl/?p=' + postID); 

它的作用是将你的内容加载到你的 #content div 中。但是 jQuery 的 load() 方法将其目标的整个内容设置为从 返回的内容加载（）。这就是为什么您只获得最后一篇文章的原因 - 您实际上成功加载了所有文章，一个接着一个，每个新的文章都会替换您上次加载的内容。

尝试类似

$('#content').append($('<div>').load('http://www.weetzelf.nl/?p=' + postID));

That 将创建一个全新的 div 元素，将内容加载到 that 中，并将其附加到您的 #content，而不是替换已有的内容。

然而，您正在做的另一件奇怪的事情是多次输出 jQuery 部分，因为它位于 php while 循环内。因此，我认为您最终会得到与帖子一样多的该脚本的副本，所有副本都在页面加载时运行（一个接一个）。在浏览器中检查站点的源代码，看看是否存在此问题是这样的——我猜你会看到

要解决这个问题，请将脚本部分移到 php while 循环之外。您只需要一份副本。