jquery - 有没有更好的方法来编写这个动态 jQuery 页码加载程序？

Question

目前我正在使用寻呼机，当您单击页码时它会加载页面。目前，代码显示当前 10 个最近的页面，然后显示指向第一页、上一页、下一页和最后一页的箭头。

我的目标是创建 jQuery 以使用正确的数字动态更新 #pages div 和/或在用户位于第一页或最后一页时删除箭头。

HTML

<div id="pages">
    <a href="1" class="first">&laquo;</a>
    <a href="1" class="previous">&lsaquo;</a>    
    <span class="current">2</span>  
    <a href="3">3</a>
    <a href="4">4</a>
    <a href="5">5</a>
    <a href="6">6</a>
    <a href="7">7</a>
    <a href="8">8</a>
    <a href="9">9</a>
    <a href="10">10</a>
    <a href="11">11</a>   
    <a href="3" class="next">&rsaquo;</a>
    <a href="128" class="last">&raquo;</a>
</div>

最高点击次数的 jQuery 示例

//change page numbers if highest number clicked
$(document).on("click", "#pages a", function(){
    if($(this).index() == 11){
        $("#pages :nth-child(3)").remove();
        $("#pages a:nth-child(11)").after('<a href="'+ (parseInt($(this).text()) + 1) + '" rel="nofollow" class="current">'+ (parseInt($(this).text()) + 1) + '</a>');
    }
});

这是一个 jFiddle，其中包含我目前拥有的工作示例:

http://jsfiddle.net/84NaC/5/

您可以在 jFiddle 示例中看到，如果您单击下方箭头或最低数字，则会删除最低数字并插入新的高数字。评论解释了这个位是如何工作的。

问题

目前的方法有点问题，我对它的运作方式不是很满意，是否有更可靠的方法来完成我正在寻找的事情？

Answer 1

我玩过你的 JSFiddle 并将 HTML 修改为

<div id="content">Default</div>
<div id="pages">
    <a href="1" class="goto-first-page">&laquo;</a>
    <a href="#" class="goto-previous-page">&lsaquo;</a>
    <a href="1" class="goto-page">1</a>
    <a href="2" class="goto-page current-page">2</a>
    <a href="3" class="goto-page">3</a>
    <a href="4" class="goto-page">4</a>
    <a href="5" class="goto-page">5</a>
    <a href="6" class="goto-page">6</a>
    <a href="7" class="goto-page">7</a>
    <a href="8" class="goto-page">8</a>
    <a href="9" class="goto-page">9</a>
    <a href="10" class="goto-page">10</a>
    <a href="11" class="goto-page">11</a>
    <a href="#" class="goto-next-page">&rsaquo;</a>
    <a href="128" class="goto-last-page">&raquo;</a>
</div>

定义了一些函数

function update_page_content(n)
{
    $('#content').html('Page ' + n + ' Content');
}

function update_page_range(lower_bound)
{
    var range = range_last_page - range_first_page;
    range_first_page = lower_bound;
    range_last_page = lower_bound + range;
    $('.goto-page').each(function(index) {
        $(this).attr('href', lower_bound + index).text(lower_bound + index);
    });

}

function goto_page(n) {
    // adjust current page
    var current = $('.goto-page[href="' + n + '"]');
    if (current.length == 0) {
        if (n <  range_first_page) {
            if (n >= first_page) {
                var lower_bound = Math.max(first_page, n - 5);
                update_page_range(lower_bound);
                current = $('.goto-page[href="' + n + '"]');
            }
        } else if (n > range_last_page) {
            if (n <= last_page) {
                var upper_bound = Math.min(last_page, n + 5);
                update_page_range(upper_bound - 10);
                current = $('.goto-page[href="' + n + '"]');
            }
        }
    }

    if (current.length > 0) {
        // set content
        update_page_content(n);

        $('.goto-page').removeClass('current-page');
        current.addClass('current-page');
    }
}

然后分别设置click()

$('.goto-previous-page').click(function () {
    var n = $('.current-page').attr('href');
    goto_page(+n - 1);
    return false;
});
$('.goto-next-page').click(function () {
    var n = $('.current-page').attr('href');
    goto_page(+n + 1);
    return false;
});
$('.goto-first-page, .goto-last-page, .goto-page').click(function () {
    var n = $(this).attr('href');
    goto_page(+n);
    return false;
});

完成JSFiddle