需要检查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>

希望这个作品如预期