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

目前，我正在使用一个寻呼机，当你点击页码时，就会加载页面。此时，代码显示当前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>

2.

最高点击次数的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>');
    }
});

//如果单击了最大的页码，请更改页码
$（文档）。在（“单击”，第a页），函数（）{
if（$（this）.index（）==11）{
$（“#页面：第n个子项（3）”）.remove（）；
$（“#第a页：第n个孩子（11）”）。在（“”）之后；
}
});

下面是一个jFiddle，其中有一个我目前拥有的工作示例：

在jFiddle示例中可以看到，如果单击较低的箭头或最低的数字，则会删除最低的数字并插入新的高数字。注释解释了该位的工作原理

问题

---

目前的方法有点问题，我对它的功能不是很满意，有没有更可靠的方法来完成我想要的任务？

我使用了你的JSFIDLE并将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>

---

Complete

这很好，但是页面可以达到128这样的高数字，因此如果单击最高数字或箭头，它们需要继续加载较高的数字，这有意义吗？@Silver89如何确定可能的最高数字？php和.htaccess会完成这一部分，每个页面都会更改，因此这是一个动态数字。但是当页面加载时，

显示最后一个页码。@Silver89这越来越像是一个项目而不是答案。不管怎样，我在这过程中学到了一些东西，就在这里。玩得高兴

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');
    }
}

$('.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;
});