javascript - 使用 jQuery 使用 Next Previous 按钮显示隐藏情侣 div

Question

例如我有 7 <div> ，我想每次在下一个按钮和上一个按钮单击时显示两个 div。如何使用 jQuery 做到这一点？

我有下一个代码，每次按下一个和上一个按钮时仅显示一个 div:

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;
  });
});

我需要的是显示第1对和第2对、第3对和第4对等中的div

如果有人能帮助我那就太好了!

谢谢!

Answer 1

试试这个:

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

按照要求，它将显示成对的 div，但如果它们是奇数个 div，则对于最后一种情况，它将单独显示第 7 个 div。休息一下，一切似乎都工作正常。

模式将是-> 1 2 -> 3 4 -> 5 6 -> 7

在线示例:here