用next（）和prev（）隱藏和顯示div

Question

我正在嘗試創建一個簡單的next和prev來顯示和隱藏div。 我正在使用引導程序4。

我正在使用.next（）和.prev（）在我的網站中進行slideshow 。

但是現在我面臨多個問題。 首先，當我單擊下一步時，它會跳過一個div，然后，當我單擊上一個時，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項，並且show / hide作用於所有這些項，因此最后顯示的項將是最后一項（因為只有3個，因此僅“跳過1”-如果有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)

更新的代碼段：

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