Jquery 需要检查div可见性以创建；导航菜单"；

因此，我有一个项目，其中显示带有标题的图像，当你点击一个按钮时，下一张“幻灯片”就会显示出来，而正在显示的幻灯片是隐藏的。到现在为止，一直都还不错。我的问题是：我需要创建一个按钮来检查当前可见的div，并将其隐藏，然后显示与具有相同类“slide”的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>

还有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(){





});



});

最后是

编辑

新查询

---

并且更新了

，因此您的jQuery只需要稍微清理一下，就会更好

搜索父对象是可以的，但是在

.next（）

调用中，可以指定选择器

我还添加了后退按钮的功能，并将滑动切换的调用改为在兄弟节点上执行，而不是执行父节点调用。它稍微减少了所需的代码量

$（文档）.ready（函数（）{
$（“.hover\u capt”）.hover（函数（）{
$（this）.sides（'.capt'）.slideToggle（）；
});
$（“.hover_capt”）。单击（函数（）{
$（this.parent（）.removeClass（'active'）；
$（this.parent（）.next（'.slide'）.addClass（'active'）；
if（$（this）.parent（）.next（'.slide'）。是（'.slide:last'））{
$（'.hover_capt'）.hide（）；
}
$（'.back'）.show（）；
});
$（“.back”）。单击（函数（）{
当前变量=$（'.active'）；
current.removeClass（“活动”）；
当前.prev（'.slide'）.addClass（'active'）；
if（当前.prev（'.slide'）。是（'.slide:first'））{
$（'.back'）.hide（）；
}
});
});
。幻灯片{
宽度：100%；
高度：500px；
显示：无；
}
塞特勒先生{
宽度：100%；
}
.梯形{
宽度：500px；
高度：333px；
背景色：白色；
保证金：0自动；
边缘顶部：50px；
}
.梯形img{
最大宽度：100%；
最大高度：100%；
宽度：自动；
高度：自动；
}
.悬停船长{
宽度：50px；
高度：50px；
背景色：红色；
保证金：0自动；
位置：相对位置；
顶部：-25px；
边界半径：50%；
}
船长{
文本对齐：居中；
z指数：-999；
宽度：500px；
背景颜色：米色；
保证金：0自动；
位置：相对位置；
填充顶部：30px；
垫底：20px；
高度：60px；
顶部：-50px；
显示：无；
}
/*演示中心*/
html，
身体{
身高：100%；
}
身体{
背景色：#330033；
}
.回来{
宽度：20px；
高度：20px；
背景颜色：粉红色；
大纲：无；
显示：无；
}
.主动{
显示：内联；
}

Tinha 24 Freiras

作为法泽的曼代

Tinha 24 Freiras

作为法泽的曼代

Tinha 24 Freiras

作为法泽的曼代

Tinha 24 Freiras

作为法泽的曼代

是！！只有一个细节，当它是第一个可见元素时，你是否可以再往后看，或者最后一个元素再往前看？当它是最后一个幻灯片div时，我如何对.hover\u capt执行相同的效果？如果我一直单击红色按钮，.hover\u capt，最终幻灯片div将消失。最后一个不应该绝对完美！荣誉遇到了一个小问题，当我单击“下一步”进入最后一张幻灯片，然后返回时，“下一步”按钮不显示，我不知道如何解决此问题：/help？
$(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(){





});



});

$(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();
    }
  });

});