我正在尝试在我的页面中创建一个演示类型的东西。
基本上第一个元素在页面加载时显示,其余元素隐藏。
单击元素内的关闭按钮后,我需要隐藏此显示元素并显示具有相同类名的下一个元素,并执行相同的过程,直到 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
有人可以就此问题提出建议吗?
提前致谢。
最佳答案
.bubs
不是 sibling 。转到祖先 a
,然后在下一个 a
中找到 .bubs
,如下所示。
$('.cls').click(function () {
$(this).closest('.bubs').hide();
$(this).closest('a').next('a').find('.bubs').show();
});
关于javascript - jQuery:按类名隐藏,然后按相同的类名显示下一个元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36898501/