jquery - JQuery クリックでテキストを循環

Question

クリック時に表示されるテキストを変更し、7 つの異なる段落または div を循環する jquery 関数を作成しようとしています。例として、私は 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;

    })();
});