JQuery 在单击时循环显示文本答案

【问题标题】：JQuery cycle through text on clickJQuery 在单击时循环显示文本
【发布时间】：2015-06-15 03:22:17
【问题描述】：

我正在尝试创建一个 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;

    })();
});

【问题讨论】：

要全部改成同一个文本吗？
您可以为您的 div 分配相同的类，然后按类执行选择。例如，如果你添加
Sample
，那么你可以做 $('.sample').click(function(){// do stuff with每个});
@JohnF。您不需要相同的类，请使用 * 运算符

标签： jquery

【解决方案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
});

FIDDLE

【讨论】：

谢谢 Spokey，非常感谢