Как можно изменить текст в цикле в DIV

#javascript #jquery

Вопрос:

У меня есть текст внутри тега DIV. Возможно ли изменить текстовое содержимое с помощью пяти разных текстовых содержимого в цикле, который никогда не заканчивается? Звучит просто, но я пытаюсь найти самый простой подход с помощью jquery или связанного с ним.

Большое спасибо, Эрик

Ответ №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 повторных комментария (ниже)

Исправление # 1: используйте разные имена переменных для каждого ротатора, поскольку <script> теги не влияют на область видимости переменной.
Исправление № 2: не меняйте имена переменных, но используйте замыкания, чтобы глобальная область видимости не была загрязнена.

Необходимы другие исправления (показаны в обеих скриптах):

На самом деле загрузите jQuery откуда-нибудь, иначе ни один из этих кодов не будет работать.
```
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  
```
Удалите запятую в конце первого text литерала массива
Замените точки с запятой после двух text объявлений массива на запятые, иначе следующие переменные ( i и $div ) будут объявлены как глобальные, что плохо.

1. Спасибо. Это работает, но то, что работает только тогда, когда у меня больше двух тегов, я хочу изменить текст. Есть ли способ изменить несколько тегов?

2. Конечно, проблема в том, что код не ограничен <script> тегами — text , i и $div все они являются глобальными. Вам либо нужно (1) использовать разные имена переменных для переменных каждого ротатора, либо (2) заключить то, что у вас сейчас есть в отдельных тегах скрипта, в отдельные замыкания. Я скину jsfiddles, показывающие каждый. О, кроме того, у вас есть запятая в конце в первом text массиве, что приведет к зависанию некоторых браузеров.

3. … также, большая проблема, страница никогда не загружает jQuery.

Ответ №2:

Трудно сказать ваши намерения, но вы можете использовать setInterval для запуска таймера для добавления / изменения информации в div .

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

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

Рабочий пример

Ответ №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); });