使用 jQuery 使用 Next Previous 按钮显示隐藏情侣 div答案

【问题标题】：show hide couples divs using Next Previous button using jQuery使用 jQuery 使用 Next Previous 按钮显示隐藏情侣 div
【发布时间】：2016-06-17 03:14:49
【问题描述】：

例如，我有 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>

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

如果有人可以帮助我，那就太好了！

谢谢！

【问题讨论】：

标签： javascript jquery html

【解决方案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

【讨论】：