2

アクセス権のないサーバーによって生成されたため、編集できない次のマークアップがあります。サーバーは、クラス'contentBox'を使用してすべてのdivをロードしますが、最初のdivのみが表示されます（他の3つには' display: none;'が追加されています）。

IDが「switchButton」のdivを追加して、クリックすると最初の「contentBox」divがフェードアウトし、次に2番目の「contentBox」divなどがフェードインするようにします（もう一度押すと、2番目が非表示になります。 3番目のdivを示します）。

ループする必要があるので、4回押すと、最初のボックスに戻ります。 

<div id="switchButton">Click Me</div>

    <div class="contentBox">Server side generated content</div>
    <div class="contentBox">Server side generated content</div>
    <div class="contentBox">Server side generated content</div>
    <div class="contentBox">Server side generated content</div>
4

1 に答える 1

5

LIVE DEMO

var c = 0;                          // counter
var n = $('.contentBox').length;    // number of elements

// now using " ++c % n " you can loop your elements
// targeting the EQuivalent one using .eq() method. (0 indexed)
// % is called "reminder" or Modulo (AKA Modulus)   


$('#switchButton').click(function(){ 
  $('.contentBox').stop().eq( ++c%n ).fadeTo(500,1).siblings('.contentBox').fadeTo(500,0); 
});

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Arithmetic_Operators
http://api.jquery.com/siblings/
http://api.jquery.com/eq/
http：/ /api.jquery.com/fadeto/

Modulo playground

于 2013-03-25T11:12:28.213 に答える