Home>

In the code below, clicking the page takes you to the next page. How can I click the button ('.button') to go to the next page?

Applicable source code
<!DOCTYPE html>
<html>

<style>
.page:nth-child(n+2){display:none;}
.button{
    height:50px;
    width:50px;
    background-color:blue;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('.page').on('click',function(){
    var idx=$('.page').index(this);
    $(this).fadeOut().queue(function(){
      $('.page').eq(idx+1).fadeIn().dequeue();
    });
  });
});
</script>

  page1
  


  page2
  


  page3
  


  page4
  


  page5
  • Answer # 1

    Resolved at https://stackoverflow.com/questions/276781. I asked the same question twice. sorry.
    Here is the solution.

    $(function(){
      $('.button').on('click',function(){
        var idx=$('.page').index($(this).closest('.page'));
        $('.page').eq(idx).fadeOut().queue(function(){
          $('.page').eq(idx+1).fadeIn().dequeue();
        });
      });
    });


    Put ".page" order with .index in idx. Get the parent element of ".button" pressed by .closest instead of .parent.
    Count the order of ".page" with .eq, apply "idx", and erase with fadeOut.