jquery - 如何让我的按钮一次显示一项？

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 开头的类的项目数，如果没有则禁用该按钮。

祝你好运。