Next() 和 prev() 隐藏和显示 div

Question

我正在尝试创建一个简单的 next 和 prev 来显示和隐藏 div。我正在使用引导程序 4。

我正在使用 .next() 和 .prev() 在我的站点中创建 slideshow。

但现在我面临着多个问题。首先，当我单击下一步时，它会跳过一个 div，然后当我单击 prev 时，div 没有显示。

$(document).ready(function(){


 $(".serviceparent .parentofparent").each(function(e) {
        if (e != 0)
            $(this).hide();
    });
    
    $("#nextservice").click(function(){

        if ($(".serviceparent .parentofparent").next().length != 0)
        {   
            $(".serviceparent .parentofparent").next().show().prev().hide();
        }
        else {
            $(".serviceparent .parentofparent").hide();
            $(".serviceparent .parentofparent").show();
        }
                        return false;

    });

    $("#prevservice").click(function(){
        if ($(".serviceparent .parentofparent").prev().length != 0)
            $(".serviceparent .parentofparent").prev().show().next().hide();
        else {
            $(".serviceparent .parentofparent").hide();
            $(".serviceparent .parentofparent").show();
        }
        return false;
    });

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    
    <div class="serviceparent row flex-row flex-nowrap text-center" style="white-space: nowrap">
               
                 
                 <br><br><br>

                    <div id="div1" class="parentofparent col-12 col-sm-6 col-md col-lg">
                       <div class="servicecontainer">
                            <i class="fa fa-globe fa-5x"></i>
                              <div class="servicetitle">
                                  <h2>Web Apps</h2>
                              </div>
                             
                       </div>
                    </div>

                     <div id="div2" class="parentofparent col-12 col-sm-6 col-md col-lg">
                       <div class="servicecontainer">
                            <i class="fa fa-laptop fa-5x"></i>
                              <div class="servicetitle">
                                  <h2>Desktop Apps</h2>
                              </div>
                              
                       </div>
                    </div>
                    
                    <div id="div3" class="parentofparent col-12 col-sm-6 col-md col-lg">
                       <div class="servicecontainer">
                            <i class="fa fa-signal fa-5x"></i>
                              <div class="servicetitle">
                                  <h2>Networking</h2>
                              </div>
                                                   </div>
                    </div>
                
                </div>   <ul class="list-inline mx-auto justify-content-center servicenavparent">
                      <li id="prevservice" class="list-inline-item servicenav fa fa-arrow-left">PREV</li> 
                      <li id="nextservice" class="list-inline-item servicenav fa fa-arrow-right">NEXT</li>
                 </ul>

那么，如何解决这个问题，我错过了什么？提前感谢，对不起我的英语不好。

Answer 1

没有“当前”的概念 - 即您试图从 移至下一个。通过使用.serviceparent .parentofparent，您选择了所有 .parentofparent 项目，并且显示/隐藏对所有项目起作用，因此显示的最后一个将是最后一个（它只是“跳过 1”，因为只有 3 - 如果有 4 个会跳过 2 个...）

在不更改太多代码的情况下，您可以将选择器更改为$(".serviceparent .parentofparent:visible")（除了隐藏其他选择器的第一个选择器）以指示您希望在当前可见的选择器之后下一个选择器。

最后一个需要额外检查，以显示第一个。在这种情况下，您可以隐藏所有并显示第一个/最后一个：

$(".serviceparent .parentofparent:first").show();

使用.next() / .prev() 的一个问题是您没有检查它是否提供了正确的项目。在您的 html 中，$(".parentofparent:first").prev() 将提供 <br/> - 因此您可以在 .next/.prev 中添加过滤器以仅提供您想要的类型，例如：

if ($(".serviceparent .parentofparent:visible").prev(".parentofparent").length != 0)

更新了sn-p：

$(document).ready(function() {


  $(".serviceparent .parentofparent").each(function(e) {
    if (e != 0)
      $(this).hide();
  });

  $("#nextservice").click(function() {

    if ($(".serviceparent .parentofparent:visible").next(".parentofparent").length != 0) {
      $(".serviceparent .parentofparent:visible").next().show().prev().hide();
    } else {
      $(".serviceparent .parentofparent").hide();
      $(".serviceparent .parentofparent:first").show();
    }
    return false;

  });

  $("#prevservice").click(function() {
    if ($(".serviceparent .parentofparent:visible").prev(".parentofparent").length != 0)
      $(".serviceparent .parentofparent:visible").prev().show().next().hide();
    else {
      $(".serviceparent .parentofparent").hide();
      $(".serviceparent .parentofparent:last").show();
    }
    return false;
  });

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<div class="serviceparent row flex-row flex-nowrap text-center" style="white-space: nowrap">

  <br><br><br>

  <div id="div1" class="parentofparent col-12 col-sm-6 col-md col-lg">
    <div class="servicecontainer">
      <i class="fa fa-globe fa-5x"></i>
      <div class="servicetitle">
        <h2>Web Apps</h2>
      </div>

    </div>
  </div>

  <div id="div2" class="parentofparent col-12 col-sm-6 col-md col-lg">
    <div class="servicecontainer">
      <i class="fa fa-laptop fa-5x"></i>
      <div class="servicetitle">
        <h2>Desktop Apps</h2>
      </div>

    </div>
  </div>

  <div id="div3" class="parentofparent col-12 col-sm-6 col-md col-lg">
    <div class="servicecontainer">
      <i class="fa fa-signal fa-5x"></i>
      <div class="servicetitle">
        <h2>Networking</h2>
      </div>
    </div>
  </div>

</div>
<ul class="list-inline mx-auto justify-content-center servicenavparent">
  <li id="prevservice" class="list-inline-item servicenav fa fa-arrow-left">PREV</li>
  <li id="nextservice" class="list-inline-item servicenav fa fa-arrow-right">NEXT</li>
</ul>

---

另一种方法是添加/删除类并使用它，例如：

$(".active").removeClass("active").next().addClass("active");

并通过 css 隐藏

.serviceparent .parentofparent { display:none; }
.active { display:block; }