jquery - JQuery 在单击时循环显示文本

Question

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

这是我到目前为止所拥有的：

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

小提琴