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>

我正在尝试制作一个简单的'幻灯片'循环周期，一次只显示'fact：'右侧的一个跨度，但我似乎无法弄清楚如何让它正常工作。

.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

请注意，如果子<span>的数量不同，您可能希望使用$('#facts span').length作为模%比较，而不是硬编码4，如：

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

Answer 2

您可以使用setInterval功能：

var $spans = $('span'), i = 0;
setInterval(function(){
     if (i == $spans.length) i = 0;
     $spans.hide().eq(i).show()
     i++   
}, 2000)

http://jsfiddle.net/Chyuw/

Answer 3

我要做的是有一个带有基本计数变量的函数，以及一个if语句来重置变量。您可以使用:eq()选择器选择数组之类的元素。

i = 0;
$('element').click(function() {
  $('span').hide();
  $('span:eq(i)').show(); // shows only the one indexed span tag
  i++;
  if (i > [amount of span tags]) { // resets i if it gets too big
    i = 0; 
  }
}

所以基本上你只是不断地迭代。

循环浏览jquery点击

3 个答案: