使用jQuery使用Next Previous button显示隐藏的div div

Question

for example I have 7 <div> , I want to show each time two divs on next button & previous button click. how to do it using jQuery?

I have the next code which displays only one div each time I press next and previus buttons:

HTML

    <div class="divs">
    <div class="panel">1</div>
    <div class="panel">2</div>
    <div class="panel">3</div>
    <div class="panel">4</div>
    <div class="panel">5</div>
    <div class="panel">6</div>
    <div class="panel">7</div>
</div>

    <a id="prev">prev</a>
    <a id="next">next</a>

JS

  $(document).ready(function(){
  $(".divs div.panel").each(function(e) {
      if (e != 0)
          $(this).hide();
          console.log(e);
  });

  $("#next").click(function(){
      if ($(".divs div.panel:visible").next().length != 0)
          $(".divs div.panel:visible").next().show().prev().hide();
      else {
          // $(".divs div.panel:visible").hide();
          // $(".divs div.panel:first").show();
      }
      return false;
  });

  $("#prev").click(function(){
      if ($(".divs div.panel:visible").prev().length != 0)
          $(".divs div.panel:visible").prev().show().next().hide();
      else {

          // $(".divs div.panel:visible").hide();
          // $(".divs div.panel:last").show();
      }
      return false;
  });
});

What I need is to show the divs in couples 1 and 2, 3 and 4 etc

if somebody can help me it would be great!

Thanks!

Answer 1

Try this:

  $(document).ready(function(){ $(".divs div.panel").each(function(e) { if (e > 1) $(this).hide(); console.log(e); }); $("#next").click(function(){ if ($(".divs div.panel:visible:last").next().length != 0){ $(".divs div.panel:visible:last").next().show(); $(".divs div.panel:visible:last").next().show(); $(".divs div.panel:visible:first").hide(); $(".divs div.panel:visible:first").hide(); } else { //either hide the next button or show 1st two again. :) } return false; }); $("#prev").click(function(){ if ($(".divs div.panel:visible:first").prev().length != 0){ var curVisLen = $(".divs div.panel:visible").length; $(".divs div.panel:visible:first").prev().show(); $(".divs div.panel:visible:first").prev().show(); $(".divs div.panel:visible:last").hide(); if(curVisLen == 2){ $(".divs div.panel:visible:last").hide(); } } else { //either hide the button or show last two divs } return false; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="divs"> <div class="panel">1</div> <div class="panel">2</div> <div class="panel">3</div> <div class="panel">4</div> <div class="panel">5</div> <div class="panel">6</div> <div class="panel">7</div> </div> <a id="prev">prev</a> <a id="next">next</a> 

As asked it will show div's in couples, but if their are odd number of div's as in question, for the last case it will show 7th div alone. Rest everything seems working fine.

Pattern will be-> 1 2 -> 3 4 -> 5 6 -> 7

Online Example : here