1 
<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：」の右側に1つのスパンのみを表示する単純な「slideshow」ループサイクルを作成しようとしていますが、正しく機能させる方法がわかりません。

.hide {
    display: none;
}

.show {
    display: inline;
}

jqueryを使用してクラスを追加/削除できると思いますか？

4

3 に答える 3

3

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>変化する場合は、次のようにハードコードされた4ではなく$('#facts span').length、モジュロ比較として使用する必要があることに注意してください。%

$('#facts span:eq(' + (current % $('#facts span').length) + ')').show();
于 2012-11-04T18:52:10.200 に答える
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/

于 2012-11-04T18:53:43.333 に答える
0

私がすることは、基本的なカウント変数を備えた関数と、変数をリセットするための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-04T18:55:10.850 に答える