通過跨越jQuery點擊循環

<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>

我試圖做一個簡單的「幻燈片循環」循環，顯示只有一個跨度的'事實：'一次，但我似乎無法圖瞭解如何使其正常工作。通過跨越jQuery點擊循環

.hide { 
    display: none; 
} 

.show { 
    display: inline; 
}

我想你可以只添加使用jQuery /刪除類？

來源

2012-11-04 Ryan

您可能希望看到我的回答這個問題：http://stackoverflow.com/questions/11003205/issues-recalling-an-animation-function-whilst-making-a-jquery-image-gallery-nex/ 11003786＃11003786 – howderek

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

來源

2012-11-04 18:52:10

出於好奇，爲什麼你最初沒有使用.length？ – Ryan

@jacob只因爲我遇到麻煩的jsfiddle例如工作，我想它，而4中的代碼更清晰一點，如果你沒有用''％運營商的目的，家族性。這也不是一個好的理由。 –

我調整的東西一點 - 我想失去段落標記（這可能不會影響什麼，但我不是100％確定），並由於某種原因，它採取了我兩次點擊它，開始騎自行車嗎？ – Ryan

您可以使用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/

來源

2012-11-04 18:53:43 undefined

謝謝您的回答 - 我知道我的措辭我的問題與標題建議不同，但我正在尋找一種可以通過點擊循環的解決方案，但我非常感謝您的幫助 – Ryan

我會做的是有一個基本的計數變量的函數，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; 
    } 
}

所以基本上你只是不斷地通過迭代。

來源

2012-11-04 18:55:10 OneChillDude

通過跨越jQuery點擊循環

回答

相關問題