Next（）和prev（）隱藏並顯示div

我試圖創建一個簡單的next和prev來顯示和隱藏div。我正在使用引導4.Next（）和prev（）隱藏並顯示div

我正在使用.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>

那麼，如何解決這個問題，我錯過了什麼？預先感謝併爲我的英語不好而感到遺憾。

來源

2017-10-18 YVS1102

沒有「當前」的概念 - 即你想從轉移到下一個。通過使用.serviceparent .parentofparent，你選擇了所有.parentofparent物品，並且顯示/隱藏對所有物品都起作用，所以最後一個物品是最後一個物品（它只是「跳過1」，因爲只有3個物品 - 如果有的話4它會跳過2 ...）

如果不更改太多的代碼，您可以將選擇器更改爲$(".serviceparent .parentofparent:visible")（除了第一個隱藏其他代碼）以指示您希望在當前代碼之後顯示下一個代碼可見。

最後一個需要額外的檢查，以顯示第一個。使用.next()/.prev()是，如果它給正確的項目，你不檢查

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

一個問題：在這種情況下，你可以隱藏所有，並顯示第一個/最後。在你的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; }

來源

2017-10-18 10:17:49

Next（）和prev（）隱藏並顯示div

回答

相關問題