jquery - 如何从帖子的单个*页面*获取内容？

Question

我正在尝试做一个画廊排序的事情，将帖子拆分到多个页面并使用 jQuery 对它们进行分页。有没有人尝试过类似的方法，你能帮我提供一些设置指南吗？

网站上有类似的画廊:http://hitfix.com/galleries/most-anticipated-tv-premieres-and-returns-of-2012

我已经成功地制作了类似的东西，但没有 jQuery，而且我知道当网站每次都必须重新加载每个页面时，用户会感到恼火。

编辑:我将在此处添加一个后续问题:

我可以使用什么函数来获取帖子中单个页面的内容？假设我想将帖子分成 5 页 - 我怎样才能获取第 3 页的内容？

Answer 1

您可以使用各种 slider/slideshow 插件来实现此目的，但如果您想自己制作，则可以像您的网站一样设置导航栏链接到，当单击其中一个数字时，您可以对 PHP 脚本进行 AJAX 调用，以输出所需的信息:

HTML--

<ul id="navigation">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
</ul>
<div id="page"></div>

CSS--

#navigation li {
    display : inline-block;

    /*Fix display:inline-block in IE7*/
    *display : inline;
    zoom     : 1;
}

jQuery--

$(function () {

    //cache the `#page` element as it will be needed later
    var $page = $('#page');

    //bind a `click` event handler to all the `<li>` elements that are children of the `#navigation` ul element
    $('#navigation').children().on('click', function (event) {
        event.preventDefault();

        //you could display a loading animation/message here while the new content is being returned from the server

        //when making the AJAX call you need to send some data to identify the "page" to output, I used the `id` key and set it's value to the index of the `<li>` element clicked in respect to all the other `<li>`s
        $.get('path/to/server-side.php', { id : $(this).index() }, function (serverResponse) {

            //now set the `#page` element's HTML to the response from the server
            $page.html(serverResponse);

            //if you played a loading animation/message you can hide it now
        }
    });
});

这是一个演示:http://jsfiddle.net/jGujw/ (请注意，我无法使用 AJAX 函数进行测试，因此我将一些服务器响应存储在数组中)

还可以通过在 AJAX 请求中反复抓取同一页面并解析 serverReponse 以仅将所需元素附加到 DOM 中来进行分页。

请注意，.on() 是 jQuery 1.7 中的新增功能，如果您使用的是旧版本，则与 .bind() 相同。