如何让我的“上一个”和“下一个”按钮在分页上工作？

Question

$(document).ready(function(){
      var $pageItem = $(".pagination li")

      $pageItem.click(function(){
        $pageItem.removeClass("active");
        $(this).addClass("active");
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

现在，我正在使用引导分页并使用 jQuery 添加一些自定义功能，以在我单击它时使页面“活跃”，这意味着当前页面。

但是，“上一个”和“下一个”按钮也将是“活动的”。 当点击“上一个”或“下一个”按钮时，我该怎么做才能只切换页面“活动”而不是将“活动”添加到“上一个”和“下一个”按钮。

Answer 1

为上一个和下一个按钮添加一个类，即列出您案例中的项目并使用.not() 排除它们。

$(document).ready(function() {
  var pageItem = $(".pagination li").not(".prev,.next");
  var prev = $(".pagination li.prev");
  var next = $(".pagination li.next");

  pageItem.click(function() {
    pageItem.removeClass("active");
    $(this).not(".prev,.next").addClass("active");
  });

  next.click(function() {
    $('li.active').removeClass('active').next().addClass('active');
  });

  prev.click(function() {
    $('li.active').removeClass('active').prev().addClass('active');
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav>
  <ul class="pagination">
    <li class="prev">
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a>
    </li>
    <li><a href="#">2</a>
    </li>
    <li><a href="#">3</a>
    </li>
    <li><a href="#">4</a>
    </li>
    <li><a href="#">5</a>
    </li>
    <li class="next">
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Answer 2

您只需为 Next 和 Prev 按钮添加简单的 if 条件

$(document).ready(function(){
      var $pageItem = $(".pagination li")

      $pageItem.click(function(){
        console.log($(this).html().indexOf('Next'));
        if($(this).html().indexOf('Next') <= -1 && $(this).html().indexOf('Previous') <= -1){
        $pageItem.removeClass("active");
        $(this).addClass("active");
          }
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Answer 3

此代码将重定向到下一个和上一个网址 使用项目中的实际链接对其进行测试。

    $(document).on('click', '.prev', function () {
//1- get first element to check if it has class 'active', 
// to prevent class 'active' from moving to prev button on click,
// if explanation isn't clear try removing if(){} to see it.
      const first = $(this).siblings().first();
      if (!first.hasClass('active')) {
//2- search <li>'s to get the one that has 'active' class.
        const active = $(this).siblings('.active');
//3- get the previous item of the <li class"active"> to move to.
        const prevItem = active.prev();
//4- get href of the item to redirect to.
        const link = prevItem.children('a').prop('href');
//5- remove 'active' class from the current <li> and give it to prev <li>.
        active.removeClass('active');
        prevItem.addClass('active');
//6- redirect to href of the new <li>.
        window.location.href = link;
      }
    });
    $(document).on('click', '.next', function () {
      const last = $(this).siblings().last();
      if (!last.hasClass('active')) {
        const active = $(this).siblings('.active');
        const nextItem = active.next();
        const link = nextItem.children('a').prop('href');
        active.removeClass('active');
        nextItem.addClass('active');
        window.location.href = link;
      }
    });

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
    <nav class="d-flex justify-content-center">
      <ul class="pagination pagination-lg">
        <li class="page-item prev">
          <a class="page-link">Previous</a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item active">
          <a class="page-link" href="#">2
          </a>
        </li>
        <li class="page-item">
          <a class="page-link" href="#">3</a>
        </li>
        <li class="page-item next">
          <a class="page-link">Next</a>
        </li>
      </ul>
    </nav>