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

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

1 个答案: