需要檢查div的可見性，以創建「導航菜單」

Question

所以，我有這個項目，其中帶有字幕的圖像顯示，當你點擊一個按鈕時，下一個「幻燈片」顯示，並且顯示的幻燈片被隱藏。到現在爲止還挺好。我的問題是：我需要創建一個按鈕來檢查當前可見的div，並隱藏它並顯示前一個具有相同類「幻燈片」的div。我也需要幫助，我單擊按鈕顯示下一張幻燈片，以顯示只有相同的類，我有它的方式它搜索父元素的部分。

因此，

<button class="back"></button> 
<div class="slide active"> 

    <div class="trapezoid"><img src="https://dl.dropboxusercontent.com/u/67567510/IMG_0296.JPG" alt="" /></div> 

    <div class="hover_capt"></div> 

    <div class="capt"> 
     <p>Tinha 24 Freiras</p> 
     <p>Mandei-as Fazer um Doce</p> 
    </div> 

</div> 
<div class="slide "> 

    <div class="trapezoid"><img src="" alt="" /></div> 

    <div class="hover_capt"></div> 

    <div class="capt"> 
     <p>Tinha 24 Freiras</p> 
     <p>Mandei-as Fazer um Doce</p> 
    </div> 

</div> 
<div class="slide "> 

    <div class="trapezoid"><img src="https://dl.dropboxusercontent.com/u/67567510/IMG_0296.JPG" alt="" /></div> 

    <div class="hover_capt"></div> 

    <div class="capt"> 
     <p>Tinha 24 Freiras</p> 
     <p>Mandei-as Fazer um Doce</p> 
    </div> 

</div> 
<div class="slide "> 

    <div class="trapezoid"><img src="" alt="" /></div> 

    <div class="hover_capt"></div> 

    <div class="capt"> 
     <p>Tinha 24 Freiras</p> 
     <p>Mandei-as Fazer um Doce</p> 
    </div> 

</div> 

CSS：

.slide{ 
    width: 100%; 
    height:500px; 
    display:none; 
} 

.centerer{ 
    width: 100%; 
} 

.trapezoid { 
    width: 500px; 
    height: 333px; 
    background-color: white; 
    margin: 0 auto; 
    margin-top:50px; 
} 

.trapezoid img{ 
    max-width: 100%; 
    max-height: 100%; 
    width: auto; 
    height: auto; 
} 

.hover_capt{ 
    width:50px; 
    height:50px; 
    background-color:red; 
    margin: 0 auto; 
    position:relative; 
    top:-25px; 
    border-radius: 50%; 
} 

.capt{ 
    text-align:center; 
    z-index: -999; 
    width:500px; 
    background-color:beige; 
    margin: 0 auto; 
    position:relative; 
    padding-top: 30px; 
    padding-bottom: 20px; 
    height: 60px; 
    top:-50px; 
    display:none; 
} 

/* Center the demo */ 
html, body { height: 100%; } 
body { 
    background-color:#330033; 
} 

.back{ 
    width:20px; 
    height: 20px; 
    background-color: pink; 
    outline: none; 
} 

.active{ 
    display:inline; 
} 

而且Jquery的

$(document).ready(function(){ 

$(".hover_capt").hover(function() { 
    $(this).parent().find('.capt').slideToggle(); 
    } 
); 

$(".hover_capt").click(function(){ 

    $(this).parent().removeClass('active'); 
    $(this).parent().next().addClass('active'); 

}); 

$(".back").click(function(){ 





}); 



}); 

最後一個Pen

編輯

$(document).ready(function() { 

    $(".trapezoid").hover(function() { 
    $(this).siblings('.capt').slideToggle(); 
    }); 

    $(".hover_capt").click(function() { 
    $(this).parent().removeClass('active'); 
    $(this).parent().next('.slide').addClass('active'); 
    if(current.next('.slide').is('.slide:first')) { 
     $('.hover_capt').hide(); 
    } 
    $('.back').show(); 
    }); 

    $(".back").click(function() { 
    var current = $('.active'); 
    current.removeClass('active'); 
    current.prev('.slide').addClass('active'); 
    if(current.prev('.slide').is('.slide:first')) { 
     $('.back').hide(); 
    } 
    }); 

}); 

新的查詢

和更新Pen

Answer 1

所以，你的jQuery只是需要一點點清理，這將是更好的。

通過父母搜索很好，但在.next()調用中，您可以指定選擇器。

我還添加了後退按鈕的功能，並更改了滑動切換的呼叫，以在兄弟姐妹上完成而不是進行父母呼叫。它削減了所需的代碼量。

$(document).ready(function() { 
 

 
    $(".hover_capt").hover(function() { 
 
    $(this).siblings('.capt').slideToggle(); 
 
    }); 
 

 
    $(".hover_capt").click(function() { 
 
    $(this).parent().removeClass('active'); 
 
    $(this).parent().next('.slide').addClass('active'); 
    if($(this).parent().next('.slide').is('.slide:last')) { 
 
     $('.hover_capt').hide(); 
 
    } 
 
    $('.back').show(); 
 
    }); 
 

 
    $(".back").click(function() { 
 
    var current = $('.active'); 
 
    current.removeClass('active'); 
 
    current.prev('.slide').addClass('active'); 
 
    if(current.prev('.slide').is('.slide:first')) { 
 
     $('.back').hide(); 
 
    } 
 
    }); 
 

 
});

.slide { 
 
    width: 100%; 
 
    height: 500px; 
 
    display: none; 
 
} 
 
.centerer { 
 
    width: 100%; 
 
} 
 
.trapezoid { 
 
    width: 500px; 
 
    height: 333px; 
 
    background-color: white; 
 
    margin: 0 auto; 
 
    margin-top: 50px; 
 
} 
 
.trapezoid img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    width: auto; 
 
    height: auto; 
 
} 
 
.hover_capt { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: red; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    top: -25px; 
 
    border-radius: 50%; 
 
} 
 
.capt { 
 
    text-align: center; 
 
    z-index: -999; 
 
    width: 500px; 
 
    background-color: beige; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    padding-top: 30px; 
 
    padding-bottom: 20px; 
 
    height: 60px; 
 
    top: -50px; 
 
    display: none; 
 
} 
 
/* Center the demo */ 
 

 
html, 
 
body { 
 
    height: 100%; 
 
} 
 
body { 
 
    background-color: #330033; 
 
} 
 
.back { 
 
    width: 20px; 
 
    height: 20px; 
 
    background-color: pink; 
 
    outline: none; 
 
    display: none; 
 
} 
 
.active { 
 
    display: inline; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="back"></button> 
 
<div class="slide active"> 
 

 
    <div class="trapezoid"> 
 
    <img src="https://dl.dropboxusercontent.com/u/67567510/IMG_0296.JPG" alt="" /> 
 
    </div> 
 

 
    <div class="hover_capt"></div> 
 

 
    <div class="capt"> 
 
    <p>Tinha 24 Freiras</p> 
 
    <p>Mandei-as Fazer um Doce</p> 
 
    </div> 
 

 
</div> 
 
<div class="slide "> 
 

 
    <div class="trapezoid"> 
 
    <img src="" alt="" /> 
 
    </div> 
 

 
    <div class="hover_capt"></div> 
 

 
    <div class="capt"> 
 
    <p>Tinha 24 Freiras</p> 
 
    <p>Mandei-as Fazer um Doce</p> 
 
    </div> 
 

 
</div> 
 
<div class="slide "> 
 

 
    <div class="trapezoid"> 
 
    <img src="https://dl.dropboxusercontent.com/u/67567510/IMG_0296.JPG" alt="" /> 
 
    </div> 
 

 
    <div class="hover_capt"></div> 
 

 
    <div class="capt"> 
 
    <p>Tinha 24 Freiras</p> 
 
    <p>Mandei-as Fazer um Doce</p> 
 
    </div> 
 

 
</div> 
 
<div class="slide "> 
 

 
    <div class="trapezoid"> 
 
    <img src="" alt="" /> 
 
    </div> 
 

 
    <div class="hover_capt"></div> 
 

 
    <div class="capt"> 
 
    <p>Tinha 24 Freiras</p> 
 
    <p>Mandei-as Fazer um Doce</p> 
 
    </div> 
 

 
</div>

希望這個作品如預期