how to get my "prev" and "next" button work on pagination?

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>

Now, I am using bootstrap pagination and add some customise feature using jQuery to make page "active" when I click on it which mean current page.

However, the "prev" and "next" button will be also "active". What can I do to only switch page "active" when click on "prev" or "next" button and not to add "active" to "prev" and "next" button.

Answer 1

This code will redirect to next and previous urls test it with actual links in your project.

    $(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>

Answer 2

Add a class to the previous and next buttons i.e. list items in your case and use .not() to exclude them.

$(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 3

You just need to add simply if condition for Next and Prev buttons

$(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>