Next（）和prev（）隐藏并显示div

时间：2017-10-18 10:06:20

标签： javascript jquery twitter-bootstrap

我正在尝试创建一个简单的next和prev来显示和隐藏div。我正在使用bootstrap 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>

所以，如何解决这个问题，我错过了什么？提前谢谢，抱歉我的英语不好。

1 个答案:

答案 0 :(得分：1)

没有＆＃34;当前＆＃34; - 也就是说你想从转移到下一个。使用.serviceparent .parentofparent您可以选​​择所有.parentofparent项目，并且show / hide会对所有项目执行操作，因此显示的最后一项将是最后一项（仅限＆＃39; s） 34;跳过1＆＃34;因为只有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)

更新了代码段：

＆＃13;
＆＃13; 
$(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;
  });

});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

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

并通过css隐藏

.serviceparent .parentofparent { display:none; }
.active { display:block; }
相关问题
最新问题