Question

好的，所以我试图建立一个有三个部分的系统。菜单，内容区域和分页区域。除了菜单之外，这些区域中的每一个都是在运行时通过jquery的.load调用加载的。顺便说一下，我这样做是一个wordpress插件。

例如在加载时，我通过.load将posts.php加载到.content类中，并通过.load将page.php加载到.pagination类中。这一切都是通过默认设置完成的，即我通过post方法加载发送默认设置。菜单代码从一开始就在那里。

问题在于分页。我希望如此，当您点击下一页时，它会加载下一个内容并在分页系统上向上移动页面，所有这些都不会在wordpress中再次加载整个页面。我认为jquery可以在这里工作，但问题是如果我将分页称为jquery调用，当用户单击下一页时，检测必须嵌套在第一个分页调用中，对吧？这是因为一个巨大的循环。

所以问题是如何制作一个分页系统，它将调用下一个内容并将其加载到内容区域并在自己的系统中移动页面，而不必再次加载整个页面，因为它是一个插件在wordpress。

任何帮助？

修改我想指出我是jQuery的新手。

Answer 1

假设您的load()返回的内容如下所示：

<ul>
    <li>item1</li>
    <li>item2</li>
</ul>
<div id='pagination'> 
    1 
    <a href='/path/to/this/page?page=2'>2</a>
    <a href='/path/to/this/page?page=3'>3</a>
</div>

您可以在将它们加载到特定div之后修改所有<a>标记，如下所示：

$('#mymenu').load('/path/to/this/page?page=1', function(){
    setAjaxLinks();
});

并且有一个函数setAjaxLinks定义如下：

$('#mymenu').find('a').click(function(event){
    event.preventDefault();
    $('#mymenu').load($(this).attr('href'), function(){
        setAjaxLinks();
    });
    return false;
});

setAjaxLinks函数的关键点在于它设置了单击链接时要执行的操作的功能。这是：

发送下一页的AJAX请求并将其加载到页面上的相应位置。
在响应中找到分页链接，并将其click事件替换为我们要分页链接要做的事情，这是......

一个。发送AJAX请求..和

B中。在响应中查找分页链接，并将其click事件替换为....

因此，我们最终会进行递归setAjaxLinks调用。

JQuery分页问题

1 个答案: