Как сделать так, чтобы моя кнопка отображала один элемент за раз?

Question

Я создал список, который я хочу скрыть от пользователя, и кнопку, которую я хочу использовать для отображения элементов списка по одному. Я использую jquery и css, чтобы скрыть / отобразить элементы списка.

Мой код работает нормально, чтобы показать первую «подсказку», но мой вопрос, как заставить кнопку показать вторую подсказку на второй щелчок, а затем третий ключ на третий щелчок. И тогда после третьего нажатия я бы хотел сделать кнопку избыточной. Заранее спасибо

$(document).ready(function() {
  $(".help").click(function() {
    $('li.hide-1').removeClass('hide-1');
  });
});

.hide-1,
.hide-2,
.hide-3 {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clues">
  <ul>
    <li class="hide-1">Right winger</li>
    <li class="hide-2">Established himself in the Bundesliga</li>
    <li class="hide-3">England International</li>
  </ul>
</div>
<div class="button">
  <button type="button" class="help">I need help</button>
</div>

Answer 1

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

var buttonCount = 0;
$(document).ready(function() {
    $(".help").click(function() {
        buttonCount += 1;
        $(`li.hide-${buttonCount}`).removeClass(`hide-${buttonCount}`);
    });
});

После того, как список заполнен, кнопка ничего не должна делать, но есть способы удалить ее. Это может включать в себя наличие предела, и когда вы достигнете этого предела, используйте jquery, чтобы скрыть кнопку или отключить ее. Или подсчитать количество предметов с классом, начинающимся с hide, и, если его нет, отключить кнопку.

Удачи.

Answer 2

Самый простой способ сделать это - поставить один класс на все li. Затем вы можете добавить новый класс, чтобы показать их, и вы можете использовать этот класс, чтобы найти li, который должен отображаться при следующем нажатии кнопки. Как то так:

jQuery($ => {
  $(".help").click(function() {
    var $target = $('.clue.show').next();
    if ($target.length === 0)
      $target = $('.clue:first');
      
    $target.addClass('show');
  });
});

.clue {
  display: none;
}

.clue.show {
  display: list-item;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clues">
  <ul>
    <li class="clue">Right winger</li>
    <li class="clue">Established himself in the Bundesliga</li>
    <li class="clue">England International</li>
  </ul>
</div>
<div class="button">
  <button type="button" class="help">I need help</button>
</div>