我创建了一个列表,我想对用户保持隐藏,和一个按钮,我想用它来逐一显示列表项目。我使用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>
我建议存储一个按钮被点击次数的计数,然后用这个数字来计算你每次删除该类的次数。像这样。
var buttonCount = 0;
$(document).ready(function() {
$(".help").click(function() {
buttonCount += 1;
$(`li.hide-${buttonCount}`).removeClass(`hide-${buttonCount}`);
});
});
列表完成后,按钮应该什么都不做, 但也有办法把它删除。这可能包括有一个限制,当你达到这个限制时,使用jquery隐藏按钮或禁用它。或者统计以隐藏为开头的类的项目数量,如果没有,则禁用按钮。
祝你好运。
最直接的方法是把所有的类都放在同一个 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>