JQuery通过点击文本循环

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

这里是我到目前为止有：

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

    })(); 
});

来源

2013-07-16 Brenan Shooter

他们全部变更为同一文本？ –

您可以将您的div分配给同一个班级，然后按班级进行选择。例如，如果添加了

Sample

，那么您可以执行$（'。sample'）。click（function（）{//对每个元素进行操作}）; –

@JohnF。你不需要相同的类，使用'*'运算符 –

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

来源

2013-07-16 12:41:53 Spokey

谢谢Spokey，非常感谢 –

JQuery通过点击文本循环

回答

相关问题