单击时，JQuery循环浏览文本

Question

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

这是我到目前为止所知道的：

<div id="content-1">Sample text1</div>
<div id="content-2">Sample text2</div>
<div id="content-3">Sample text3</div>
<div id="content-4">Sample text4</div>
<div id="content-5">Sample text5</div>
<div id="content-6">Sample text6</div>
<div id="content-7">Sample text7</div>

和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
});