javascript - 在 jquery 单击上循环跨度

Question

<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 添加/删除类吗？

Answer 1

使用 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++;
    });
});

Here is a live demo

注意如果 child 的数量<span>变化，你会想使用 $('#facts span').length作为模 %比较而不是硬编码的 4，如下所示:

$('#facts span:eq(' + (current % $('#facts span').length) + ')').show();