jQuery在点击时循环显示文本 [英] JQuery cycle through text on click

问题描述

我正在尝试创建一个jquery函数，该函数将更改单击时显示的文本并在7个不同的段落或div中循环. 举例来说，我创建了7个不同的div，希望它们像循环功能一样循环通过，但是单击命令而不是计时.

I am trying to create a jquery function that will change the text displayed on click and cycle through 7 different paragraphs or divs. as an example I have created 7 different divs, and would like them to cycle through like the cycle function does but on a click command rather than timed.

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

here is what i have so far:

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

    })();
});

推荐答案

$(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

这篇关于jQuery在点击时循环显示文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！