<div id="facts">
<p>notes:</p><span class="hide">note 1</span>
<span class="hide">note 2</span>
<span class="hide">note 3</span>
<span class="hide">note 4</span>
</div>
我正在尝试制作一个简单的“幻灯片”循环循环,一次只显示“事实:”右侧的一个跨度,但我似乎无法弄清楚如何让它正常工作。
.hide {
display: none;
}
.show {
display: inline;
}
我认为您可以使用 jquery 添加/删除类吗?
最佳答案
使用 jQuery .hide()
,您可以先将它们全部隐藏。然后在单击时增加一个变量,并将其值与 % 4
进行比较其中 4 是可用跨度的总数。取消隐藏 :eq()
为变量的当前值。
$(document).ready(function() {
var current = 0;
// This is bound to the onclick, but you can attach it to any event.
$('#facts').click(function() {
// Hide all of them
$('#facts span').hide();
// Unhide the current one:
$('#facts span:eq(' + (current % 4) + ')').show();
// Increment the variable;
current++;
});
});
注意如果 child 的数量<span>
变化,你会想使用 $('#facts span').length
作为模 %
比较而不是硬编码的 4,如下所示:
$('#facts span:eq(' + (current % $('#facts span').length) + ')').show();
关于javascript - 在 jquery 单击上循环跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13221677/