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

JQuery方法“next”应该包含你想要显示的下一个元素的类。如果你使用next（“。bubs”），它应该可以工作：

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

注意：我假设您要隐藏的元素是第一个拥有“bubs”类的元素。

Answer 2

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

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

jQuery：按类名隐藏然后用同一个类名显示下一个元素？

2 个答案: