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 plugin然后调用它。这只适用于jquery1.4.4

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

Answer 2

你做错的主要是：

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

这样做会将您的内容加载到#content div中。但jQuery的load()方法将其目标的全部内容设置为load()返回的内容。这就是为什么你只收到最后一篇文章 - 你实际上是一个接一个地成功加载所有帖子，每个新帖子都替换了你上一次加载的帖子。

尝试类似

的内容

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

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

然而，你正在做的另一件奇怪的事情是多次输出jQuery部分，因为它在php while循环中。因此，我认为你最终会得到与该帖子一样多的副本，所有帖子都在页面加载上运行（一个接一个。）在浏览器中查看您网站的来源，看看是否有这个是这样的 - 我猜你会看到<script>块的多个副本。

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

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

2 个答案: