Question

我在DIV标签内有文字。是否可以在永不结束的循环中使用五种不同的文本内容更改文本内容？听起来很简单，但我试图用jquery或相关的方法找到最简单的方法。

非常感谢，埃里克

Answer 1

非常简单的方法：使用setInterval()。

var text = ['foo', 'bar', 'baz'];
    i = 0,
    $div = $('#myDiv');

setInterval(function ()
{
    $div.text(text[i++ % text.length]);
}, 1000);

http://jsfiddle.net/mattball/TJv3K/

修改如果您希望获得更好的效果：http://jsfiddle.net/mattball/TJv3K/1/

编辑2 重新审核评论（下方）

Fix #1 ：为每个旋转器使用不同的变量名称，因为变量作用域不受<script>标记的影响。
Fix #2 ：请勿更改变量名称，但请使用闭包，以免全局范围受到污染。

需要其他修复（显示在两个小提琴中）：

实际上从某处加载jQuery，否则这些代码都不起作用。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

删除第一个text数组文字
将两个text数组声明后面的分号更改为逗号，否则以下变量（i和$div）将被声明为全局，这是一个坏事

Answer 2

很难说出您的意图，但您可以使用setInterval触发计时器在div中附加/更改信息。

<div id="change">initial content</div>
<script>
    $(function() {
      setInterval(update, 1000);
    });

    function update() {
      $("#change").append(".");
    }
</script>

Working example

Answer 3

以下是一个例子：http://jsfiddle.net/jbkjE/11/。它比这个要大一点，因为我添加了一些元素来显示正在发生的发条。

以下是代码：

var strings = ['Foo', 'Bar', 'FooBar', 'BarFoo', 'FooBarFoo'];
var index = 0;

function cycle()
{
    $('#cycle').text(strings[index % strings.length]);
    index++;

    setTimeout(cycle, 500);
}

cycle();

您只需遍历数组的值，为此，您可以模拟数组的长度（Google“模运算符”）。

和（有点）单线：

var index = 0;
var strings = ['Foo', 'Bar', 'FooBar', 'BarFoo', 'FooBarFoo'];

$(function() { setInterval(function() {$('#cycle').text(strings[index++ % strings.length]);}, 1000); });

如何改变DIV循环中的文本

3 个答案: