javascript - jQuery:按类名隐藏，然后按相同的类名显示下一个元素？

Question

我正在尝试在我的页面中创建一个演示类型的东西。

基本上第一个元素在页面加载时显示，其余元素隐藏。

单击元素内的关闭按钮后，我需要隐藏此显示元素并显示具有相同类名的下一个元素，并执行相同的过程，直到 next() 中不再有元素 显示。

我的 html 看起来像这样:

<a class="tooltip" href="#">
<div style="left:-200px;" class="bubs"><div style=" position:absolute; top:10px; right:10px;"><i class="cls" aria-hidden="true"></i></div></div>

<span class="tooltiptext">Some texts</span><i style="color:#F90;" class="fa fa-thumbs-up" aria-hidden="true"></i></a>



<a class="tooltip" href="#">
<div style="left:-200px;" class="bubs"><div style=" position:absolute; top:10px; right:10px;"><i class="cls" aria-hidden="true"></i></div></div>

<span class="tooltiptext">Some texts</span><i style="color:#F90;" class="fa fa-thumbs-up" aria-hidden="true"></i></a>

我的 jquery 看起来像这样:

$('.cls').click(function() {
    $('.bubs').hide();
     $(".bubs").next().show();
});

我的简单代码会隐藏正在显示的 .bubs 但不会显示下一个 .bubs

有人可以就此问题提出建议吗？

提前致谢。

Answer 1

.bubs 不是 sibling 。转到祖先 a，然后在下一个 a 中找到 .bubs，如下所示。

$('.cls').click(function () {
    $(this).closest('.bubs').hide();
    $(this).closest('a').next('a').find('.bubs').show();
});