html - 使用 jquery 在分页时激活下一个/上一个按钮

Question

我有分页功能，我不知道如何在单击它时激活下一个/上一个图标。目前，如果我点击数字，它会显示相应的页面。请帮助显示单击下一个和上一个按钮时的页面，以及如果页面分别位于第一页和最后一页，如何禁用下一个和上一个图标。请帮忙。下面是我的代码

$(document).ready(function(){   

                let pageSize = 2;
              let pageCount = Math.ceil($('.content').length / 2);

              let showPage = function(page) {
                let start = pageSize * (page - 1);
                let end = pageSize * page;
                $(".content").hide().slice(start, end).show();
                
                $('#prev a').toggleClass('disabled', page <= 1);
                $('#next a').toggleClass('disabled', page >= pageCount);
              }

              showPage(1);

              $("#pagin li a").click(function() {
                $("#pagin li a").removeClass("current");
                $(this).addClass("current");
                showPage(parseInt($(this).text()))
              });
                          
            });

.content {
    margin: 1px;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    float: left;
    background-color: gray;
}

#pagin {
    clear: both;
    padding:0;
    width:500px;
    margin:0 auto;
}
#pagin li {
    float:left;
    margin-right:10px;
}
#pagin li a {
    display:block;
    color:#717171;
    font:bold 11px;
    text-shadow:0px 1px white;
    padding:5px 8px;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:0px 1px 3px 0px rgba(0,0,0,0.35);
    -moz-box-shadow:0px 1px 3px 0px rgba(0,0,0,0.35);
    box-shadow:0px 1px 3px 0px rgba(0,0,0,0.35);
    background:#f9f9f9;
    background:-webkit-linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
    background:-moz-linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
    background:-o-linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
    background:-ms-linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
    background:linear-gradient(top,#f9f9f9 0%,#e8e8e8 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9',endColorstr='#e8e8e8',GradientType=0 );
}
#pagin li a.current {
    color:white;
    text-shadow:0px 1px #3f789f;
    -webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,0.8);
    -moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,0.8);
    box-shadow:0px 1px 2px 0px rgba(0,0,0,0.8);
    background:#7cb9e5;
    background:-webkit-linear-gradient(top,#7cb9e5 0%,#57a1d8 100%);
    background:-moz-linear-gradient(top,#7cb9e5 0%,#57a1d8 100%);
    background:-o-linear-gradient(top,#7cb9e5 0%,#57a1d8 100%);
    background:-ms-linear-gradient(top,#7cb9e5 0%,#57a1d8 100%);
    background:linear-gradient(top,#7cb9e5 0%,#57a1d8 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5',endColorstr='#57a1d8',GradientType=0 );
}
#pagin li a.disabled {
  pointer-events: none;
  opacity: 0.4;
}

#pagin li a:hover {
    -webkit-box-shadow:0px 1px 3px 0px rgba(0,0,0,0.55);
    -moz-box-shadow:0px 1px 3px 0px rgba(0,0,0,0.55);
    box-shadow:0px 1px 3px 0px rgba(0,0,0,0.55);
    background:#fff;
    background:-webkit-linear-gradient(top,#fff 0%,#e8e8e8 100%);
    background:-moz-linear-gradient(top,#fff 0%,#e8e8e8 100%);
    background:-o-linear-gradient(top,#fff 0%,#e8e8e8 100%);
    background:-ms-linear-gradient(top,#fff 0%,#e8e8e8 100%);
    background:linear-gradient(top,#fff 0%,#e8e8e8 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#e8e8e8',GradientType=0 );
}
#pagin li a:active,#pagin li a.current:active {
    -webkit-box-shadow:inset 0px 1px 3px 0px rgba(0,0,0,0.5),0px 1px 1px 0px rgba(255,255,255,1) !important;
    -moz-box-shadow:inset 0px 1px 3px 0px rgba(0,0,0,0.5),0px 1px 1px 0px rgba(255,255,255,1) !important;
    box-shadow:inset 0px 1px 3px 0px rgba(0,0,0,0.5),0px 1px 1px 0px rgba(255,255,255,1) !important;
}
#pagin li a.current:hover {
    -webkit-box-shadow:0px 1px 2px 0px rgba(0,0,0,0.9);
    -moz-box-shadow:0px 1px 2px 0px rgba(0,0,0,0.9);
    box-shadow:0px 1px 2px 0px rgba(0,0,0,0.9);
    background:#99cefc;
    background:-webkit-linear-gradient(top,#99cefc 0%,#57a1d8 100%);
    background:-moz-linear-gradient(top,#99cefc 0%,#57a1d8 100%);
    background:-o-linear-gradient(top,#99cefc 0%,#57a1d8 100%);
    background:-ms-linear-gradient(top,#99cefc 0%,#57a1d8 100%);
    background:linear-gradient(top,#99cefc 0%,#57a1d8 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc',endColorstr='#57a1d8',GradientType=0 );
}
li{list-style-type:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-container" data-page="1">
  <div class="content">1 I have some content</div>
  <div class="content">2 I have some content</div>
  <div class="content">3 I have some content</div>
  <div class="content">4 I have some content</div>
  <div class="content">5 I have some content</div>
  <div class="content">6 I have some content</div>
  <div class="content">7 I have some content</div>
  <div class="content">8 I have some content</div>
  <div class="content">9 I have some content</div>
  <div class="content">10 I have some content</div>
  <div class="content">11 I have some content</div>
  <div class="content">12 I have some content</div>
  <div class="content">13 I have some content</div>
  <div class="content">14 I have some content</div>
  <div class="content">15 I have some content</div>
  <div class="content">16 I have some content</div>
  <div class="content">17 I have some content</div>
  <div class="content">18 I have some content</div>
  <div class="content">19 I have some content</div>
  <div class="content">20 I have some content</div>
  <div class="content">21 I have some content</div>
  <div class="content">22 I have some content</div>
  <div class="content">23 I have some content</div>
  <div class="content">24 I have some content</div>
</div>
<div  id="pagin">
<ul>
  <li>
    <a href="#" id="prev">
      <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.15493e-08 6L6 12L7.41 10.59L2.83 6L7.41 1.41L6 7.15493e-08L7.15493e-08 6Z" fill="#212934"/>
      </svg>
    </a>
  </li>
  <li class=""><a class="page current" href="#">1</a></li>
  <li class=""><a class="page" href="#">2</a></li>
  <li class=""><a class="page" href="#">3</a></li>  
  <li class=""><a class="page" href="#">4</a></li>
  <li class=""><a class="page" href="#">5</a></li>
  <li class=""><a class="page" href="#">6</a></li>
  <li class=""><a class="page" href="#">7</a></li>
   <li class=""><a class="page" href="#">8</a></li>
  <li>
    <a href="#" id="next">
      <svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M6.1748 5.75421L1.1748 0.754211L-0.000195489 1.92921L3.81647 5.75421L-0.000195398 9.57921L1.1748 10.7542L6.1748 5.75421Z" fill="#212934"/>
      </svg>
    </a>
  </li>
</ul>
</div>

Answer 1

要根据当前页面启用/禁用 #prev 和 #next 链接，您可以在 showPage 函数中执行检查，该函数向它们添加一个设置 pointer-events: none 的类。

另请注意使用 slice() 而不是显式循环来隐藏/显示与当前页面相关的 .content 元素。

更新:

On clicking of next & previous button how shall I show the respective page

要实现这一点，请更改您的逻辑，以便设置页面的函数也更新 UI - 即。显示当前页面的.content，设置事件页面按钮状态和上一页/下一页的禁用状态。

从那里你唯一需要记录的是当前页码，这样你就可以在点击上一个/下一个时增加/减少它，我已经使用 data()容器上的属性到 .content 元素。然后您可以将其传递给设置事件页面的函数。

试试这个:

jQuery($ => {  
  let $pageContainer = $('.page-container');
  let $content = $pageContainer.children('.content');
  let $pageLinks = $('#pagin li a.page');
  let $prev = $('#prev');
  let $next = $('#next');
  
  let pageSize = 2;
  let pageCount = Math.ceil($('.content').length / 2);
  let currentPage = $pageContainer.data('page') || 1;

  let setActivePage = page => {
    let start = pageSize * (page - 1);
    let end = pageSize * page;
    $content.hide().slice(start, end).show();

    $prev.toggleClass('disabled', page <= 1);
    $next.toggleClass('disabled', page >= pageCount);    
    $pageLinks.removeClass("current").eq(page - 1).addClass('current');    
    $pageContainer.data('page', page);
  }

  setActivePage(currentPage);

  $pageLinks.on('click', e => setActivePage($(e.target).closest('li').index()));
  $prev.on('click', e => setActivePage($pageContainer.data('page') - 1));
  $next.on('click', e => setActivePage($pageContainer.data('page') + 1));
});

.content {
  margin: 1px;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  float: left;
  background-color: gray;
}

#pagin {
  clear: both;
  padding: 0;
  width: 400px;
  margin: 0 auto;
}

#pagin li {
  float: left;
  margin-right: 10px;
}

#pagin li a {
  display: block;
  color: #717171;
  font: bold 11px;
  text-shadow: 0px 1px white;
  padding: 5px 8px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.35);
  background: #f9f9f9;
  background: -webkit-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -moz-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -o-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: -ms-linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  background: linear-gradient(top, #f9f9f9 0%, #e8e8e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e8e8e8', GradientType=0);
}

#pagin li a.current {
  color: white;
  text-shadow: 0px 1px #3f789f;
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.8);
  background: #7cb9e5;
  background: -webkit-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -moz-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -o-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: -ms-linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  background: linear-gradient(top, #7cb9e5 0%, #57a1d8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cb9e5', endColorstr='#57a1d8', GradientType=0);
}

#pagin li a.disabled {
  pointer-events: none;
  opacity: 0.4;
}

#pagin li a:hover {
  -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.55);
  background: #fff;
  background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -o-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: -ms-linear-gradient(top, #fff 0%, #e8e8e8 100%);
  background: linear-gradient(top, #fff 0%, #e8e8e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#e8e8e8', GradientType=0);
}

#pagin li a:active,
#pagin li a.current:active {
  -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
  -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
  box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 1px 1px 0px rgba(255, 255, 255, 1) !important;
}

#pagin li a.current:hover {
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.9);
  background: #99cefc;
  background: -webkit-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -moz-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -o-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: -ms-linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  background: linear-gradient(top, #99cefc 0%, #57a1d8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99cefc', endColorstr='#57a1d8', GradientType=0);
}

li {
  list-style-type: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="page-container">
  <div class="content">1 I have some content</div>
  <div class="content">2 I have some content</div>
  <div class="content">3 I have some content</div>
  <div class="content">4 I have some content</div>
  <div class="content">5 I have some content</div>
  <div class="content">6 I have some content</div>
  <div class="content">7 I have some content</div>
  <div class="content">8 I have some content</div>
  <div class="content">9 I have some content</div>
  <div class="content">10 I have some content</div>
  <div class="content">11 I have some content</div>
  <div class="content">12 I have some content</div>
  <div class="content">13 I have some content</div>
  <div class="content">14 I have some content</div>
  <div class="content">15 I have some content</div>
  <div class="content">16 I have some content</div>
</div>

<ul id="pagin">
  <li>
    <a href="#" id="prev">
      <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.15493e-08 6L6 12L7.41 10.59L2.83 6L7.41 1.41L6 7.15493e-08L7.15493e-08 6Z" fill="#212934"/>
      </svg>
    </a>
  </li>
  <li><a class="page current" href="#">1</a></li>
  <li><a class="page" href="#">2</a></li>
  <li><a class="page" href="#">3</a></li>
  <li><a class="page" href="#">4</a></li>
  <li><a class="page" href="#">5</a></li>
  <li><a class="page" href="#">6</a></li>
  <li><a class="page" href="#">7</a></li>
  <li><a class="page" href="#">8</a></li>
  <li>
    <a href="#" id="next">
      <svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M6.1748 5.75421L1.1748 0.754211L-0.000195489 1.92921L3.81647 5.75421L-0.000195398 9.57921L1.1748 10.7542L6.1748 5.75421Z" fill="#212934"/>
      </svg>
    </a>
  </li>
</ul>