遍歷跨度的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++;
    });
});

下面是現場演示

請注意，如果子<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; 
  }
}

因此，基本上，您只是在不斷迭代。