需要检查 div 可见性才能创建 "navigation menu"

Question

所以，我有这个项目，其中显示带有字幕的图像，当您单击一个按钮时，下一个 "slide" 显示，并且正在显示的幻灯片被隐藏。到目前为止，一切都很好。我的问题是：我需要创建一个按钮来检查 div 目前可见的内容并隐藏它并显示 div 之前那个具有相同 class [=36= 的按钮].我还需要有关单击按钮以显示下一张幻灯片以显示具有相同 class 的部分的部分帮助，我使用它搜索父元素的方式。

所以，

<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>

希望这能按预期工作

需要检查 div 可见性才能创建 "navigation menu"

Need to check div visibility to create "navigation menu"

html

css

jquery

visibility