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 не являются братьями и сестрами. Перейдите к предку a, а затем найдите .bubs в следующем a, как показано ниже.

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

Answer 2

Метод JQuery «следующий» должен содержать класс следующего элемента, который вы хотите show.It должен работать, если вы используете следующие («бюст»), как это:

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

Примечание: Я предполагаю, что элемент, который вы хотите скрыть, является первым, у кого есть класс «bubs».