我試圖創建一個簡單的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>
那麼,如何解決這個問題,我錯過了什麼?預先感謝併爲我的英語不好而感到遺憾。