0

これは基本的に、クリックすると次の隠しスパンに進みます。

マークアップ:

<div id="facts">
    <span>click to cycle</span>
    <span>fact 1</span>
    <span>fact 2</span>
    <span>fact 3</span>
    <span>fact 4</span>
</div>

js:

$(document).ready(function() {
    var current = 1;
          $('#facts span').click(function() {
              // Hide all of them
              $('#facts span').hide();
              // Unhide the current one:
              $('#facts span:eq(' + (current % $('#facts span').length) + ')').show();
              // Increment the variable
              console.log(current % 4);
              current++;
          });

    // Unhide the first one on load
    $('#facts span:first-child').show();
});​

私が今やろうとしているのは、クリックされた後に最初のスパンを削除することです。これは、ユーザーが「クリックしてサイクル」命令を再度表示する必要がないためです。

4

2 に答える 2

1

どうぞ

フィドル

HTML 

<div id="facts">
    <span id='remove'>click to cycle</span>
    <span>fact 1</span>
    <span>fact 2</span>
    <span>fact 3</span> 
   <span>fact 4</span>
</div>

JQuery

$(document).ready(function() {
    var current = 1;
          $('#facts span').click(function() {
              $('#remove').remove();
              // Hide all of them
              $('#facts span').hide();
              // Unhide the current one:
              $('#facts span:eq(' + (current % $('#facts span').length) + ')').show();// Increment the variable
              console.log(current % 4);
              current++;
          });

    // Unhide the first one on load
    $('#facts span:first-child').show();
});
于 2012-11-04T22:57:43.633 に答える
1

元の ID に特定の ID を割り当て、他の ID にクラスを割り当てます。

<span id='removeme'>click to cycle</span>
<span class='cycleme'>fact 1</span>
<span class='cycleme'>fact 2</span>
<span class='cycleme'>fact 3</span>
<span class='cycleme'>fact 4</span>

removemeCSS を使用して他のすべてを表示および非表示にする

#removeme {
  display: inline;
}
span.cycleme {
  display: none;
}

スクリプトでは、クリック イベントを元のイベントにバインドして単純に削除します。後続のものは、以前と同じハンドラーを取得します。

$(document).ready(function() {
    // Initialize
    var current = 1;

   // Bind the first one's onclick to remove itself
   $('#removeme').click(function() {
      $(this).remove();
      // And display the first one
      $('#facts span:first-child').show();
   });


   // Target the others via their class
   $('#facts span.cycleme').click(function() {
      // Hide all of them
      $('#facts span').hide();
      // Unhide the current one:
      $('#facts span:eq(' + (current % $('#facts span.cycleme').length) + ')').show();
      // Increment the variable
      current++;
   });
});​

これがライブの例です

于 2012-11-04T22:45:53.227 に答える