Question

我为用户评论实施了一个分页系统，根据您点击的页面，我希望每个方向只显示3个页码。因此，如果您点击第6页，则只显示第2 - 9页，共7页。

我的html如此：

<div id="paging">
<span id="1" class="page"></span>
<span id="2" class="page"></span>
<span id="3" class="page"></span>
<span id="4" class="page"></span>
and so on...
</div>

像这样的jQuery / javascript：

$(".page").click(function() {
        var clicked = $(this).attr("id");

        var parent = $("#paging span");
        $(parent).each(function() {
            if($(this).attr("id")+ 3 >= clicked)
            $(this).removeClass("hidden");
            else
            $(this).addClass("hidden");
            });
});

到目前为止，它所做的只是将隐藏的类应用于当前单击的页码之前的任何页码。

Answer 1

$(this).attr("id")返回一个字符串。

您需要通过编写parseInt($(this).attr("id"), 10)将此字符串转换为数字。

Answer 2

将您的ID更改为“P1”，“P2”等，例如

<div id="paging">
    <span id="P1" class="page">A</span>
    <span id="P2" class="page">B</span>
    <span id="P3" class="page">C</span>
    <span id="P4" class="page">D</span>
    <span id="P5" class="page">E</span>
    <span id="P6" class="page">f</span>
    <span id="P7" class="page">g</span>
    <span id="P8" class="page">h</span>
    <span id="P9" class="page">i</span>
<!-- and so on... -->
</div>

然后将您的javascript更改为：

$(".page").click(function() {
         var page_clicked = parseInt(this.id.replace(/^P/, ''));
         $(this).siblings('span').each(function() {
            var page_no = parseInt(this.id.replace(/^P/, ''));
            if((page_no >= (page_clicked-3)) && (page_no <= (page_clicked+3)))
                $(this).removeClass("hidden");
            else 
                $(this).addClass("hidden");
        });
});

或更好：

$(".page").click(function() {
         var page_clicked = parseInt(this.id.replace(/^P/, '')) - 1;
         var $pages       = $(this).siblings('span');
         var from         = Math.max(0,             page_clicked-3);
         var to           = Math.min($pages.length, page_clicked+3);

         $pages.addClass('hidden').slice(from,to).removeClass('hidden');
});

帮助jQuery if语句

2 个答案: