如何使我的按钮一次显示一个项目？

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隐藏按钮或禁用它。或计数以隐藏开头的类的项数，如果没有，则禁用该按钮。

祝好运。

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>

​