JQuery在单击时循环显示文本

我正在尝试创建一个jquery函数，它将更改单击时显示的文本并循环显示7个不同的段落或div。 作为一个例子，我已经创建了7个不同的div，并且希望它们像循环函数一样循环，但是在单击命令而不是定时。

这是我到目前为止：

Sample text1
 
Sample text2
 
Sample text3
 
Sample text4
 
Sample text5
 
Sample text6
 
Sample text7 

和JS

 $(document).ready(function () { var divs = $('div[id^="content-"]').hide(), i = 0; (function cycle() { divs.eq(i).fadeIn(400) .delay() .fadeOut(400, cycle); i = ++i % divs.length; })(); }); 

Answer 1

 $(document).ready(function () { var divs = $('div[id^="content-"]').hide(), i = 0; function cycle() { divs.fadeOut(400).delay(400).eq(i).fadeIn(400); i = ++i % divs.length; }; cycle() $('button').click(cycle); // click button to show next paragraph }); 

小提琴