如何停止第一页和最后一页的分页？

Question

下面，我创建了一个jQuery分页示例。我想停止上一页的上一个链接，而停止最后一页的下一个链接。当前，如果在首页上单击，则前一个将循环到最后一页；同样，如果在最后一页上单击，则下一个将循环到第一页。最好的方法是什么？

var page = 1;

function showPage(page) {
    $('.post').hide();
    $('#page'+page).show();
    $('#myPageNum').text(page);
}

function prevPage() {
    if (page == 1) {
        page = $('.pagination .post').length;
    } else {
        page--;
    }
    showPage(page);
}

function nextPage() {
    if (page == $('.pagination .post').length) {
        page = 1;
    } else {
        page++;
    }
    showPage(page);
}

$(document).ready(function() {
    showPage(page);
    
    $('#prev').click(prevPage);
    $('#next').click(nextPage);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="pagination">
    <div class="post" id="page1">
        <h3> head1 </h3>
        <p> Test1 </p>
    </div>

    <div class="post" id="page2">
        <h3> head2 </h3>
        <p> Test2 </p>
    </div>

    <div class="post" id="page3">
        <h3> head3 </h3>
        <p> Test3 </p>
    </div>

    <div class="post" id="page4">
        <h3> head4 </h3>
        <p> Test4 </p>
    </div>

    <div class="post" id="page5">
        <h3> head5 </h3>
        <p> Test5 </p>
    </div>

    <div class="post" id="page6">
        <h3> head6 </h3>
        <p> Test6 </p>
    </div>
</div>
<a href="#" id="prev">Prev page</a>
<span id="myPageNum">1</span>
<a href="#" id="next">Next page</a>

Answer 1

禁止分页功能运行。 请参阅我添加的return语句。

var page = 1;

function showPage(page) {
    $('.post').hide();
    $('#page'+page).show();
    $('#myPageNum').text(page);
}

function prevPage() {
    if (page == 1) {
        return;
        page = $('.pagination .post').length;
    } else {
        page--;
    }
    showPage(page);
}

function nextPage() {
    if (page == $('.pagination .post').length) {
      return;
        page = 1;
    } else {
        page++;
    }
    showPage(page);
}

$(document).ready(function() {
    showPage(page);
    
    $('#prev').click(prevPage);
    $('#next').click(nextPage);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="pagination">
    <div class="post" id="page1">
        <h3> head1 </h3>
        <p> Test1 </p>
    </div>

    <div class="post" id="page2">
        <h3> head2 </h3>
        <p> Test2 </p>
    </div>

    <div class="post" id="page3">
        <h3> head3 </h3>
        <p> Test3 </p>
    </div>

    <div class="post" id="page4">
        <h3> head4 </h3>
        <p> Test4 </p>
    </div>

    <div class="post" id="page5">
        <h3> head5 </h3>
        <p> Test5 </p>
    </div>

    <div class="post" id="page6">
        <h3> head6 </h3>
        <p> Test6 </p>
    </div>
</div>
<a href="#" id="prev">Prev page</a>
<span id="myPageNum">1</span>
<a href="#" id="next">Next page</a>

Answer 2

要实现此目的，您只需要修改if和prevPage()函数中nextPage()条件中的逻辑，以使它们仅在当前页面不在页面上时才执行操作。页面的范围。试试这个：

var page = 1;

function showPage(page) {
  $('.post').hide();
  $('#page' + page).show();
  $('#myPageNum').text(page);
}

function prevPage() {
  if (page > 1) {
    page--;
    showPage(page);
  }
}

function nextPage() {
  if (page < $('.pagination .post').length) {
    page++;
    showPage(page);
  }
}

$(document).ready(function() {
  showPage(page);

  $('#prev').click(prevPage);
  $('#next').click(nextPage);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="pagination">
  <div class="post" id="page1">
    <h3> head1 </h3>
    <p> Test1 </p>
  </div>

  <div class="post" id="page2">
    <h3> head2 </h3>
    <p> Test2 </p>
  </div>

  <div class="post" id="page3">
    <h3> head3 </h3>
    <p> Test3 </p>
  </div>

  <div class="post" id="page4">
    <h3> head4 </h3>
    <p> Test4 </p>
  </div>

  <div class="post" id="page5">
    <h3> head5 </h3>
    <p> Test5 </p>
  </div>

  <div class="post" id="page6">
    <h3> head6 </h3>
    <p> Test6 </p>
  </div>
</div>
<a href="#" id="prev">Prev page</a>
<span id="myPageNum">1</span>
<a href="#" id="next">Next page</a>