Блог

У меня есть несколько скрытых элементов, кроме первого. Я не хочу, чтобы это зацикливалось. При нажатии кнопки я хочу —

1. отобразить следующий div. (например: поскольку первый div уже отображается, при первом щелчке по второму div, при третьем щелчке по второму div и так далее)
2. снова скрыть предыдущий div, который был сделан видимым

Я пытаюсь это —

 $(document).ready(function() {
    $("#show").click((function(){
    var counter = 1;
    return function()
    {  
     
        $('.test').each(function(){
        var index = $(this).index() 1;
        if( counter == index amp;amp; ($(this).css('display') != 'none')){
           $(this).hide();
        }
        if (counter == index amp;amp; ($(this).css('display') == 'none' amp;amp; counter < 6){
            counter  ;
            $(this).show();
            
        }

       })
       
    }
    })());
});
  

 <div class="test">TEXTA</div>
<div class="test">TEXTB</div>
<div class="test">TEXTC</div>
<div class="test">TEXTD</div>
<div class="test">TEXTE</div>
<div class="test">TEXTF</div>

<button id="show"></button>
  

Он работает только при первом щелчке. Как это исправить? Если есть более простой способ сделать это, пожалуйста, предложите и это.

Ваша логика намного сложнее, чем должна быть. Нет необходимости в IIFEs или даже в цикле.

Самый простой способ достичь вашей цели — поместить класс CSS в отображаемый элемент, а затем одним нажатием кнопки удалить этот класс из активного элемента и применить его к следующему родственному элементу. Попробуйте это:

 jQuery($ => {
  $("#show").on('click', e => {
    $('.active').removeClass('active').next().addClass('active');
  });
});  

 .test { display: none; }
.test.active { display: block; }  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test active">TEXTA</div>
<div class="test">TEXTB</div>
<div class="test">TEXTC</div>
<div class="test">TEXTD</div>
<div class="test">TEXTE</div>
<div class="test">TEXTF</div>

<button id="show">Next</button>