Как отобразить задержанный текст простым способом, используя js / jquery?

Question

Как отобразить задержанный текст простым способом, используя js / jquery?

0

Я хочу создать игру html5. Мастер игры использует чат-подобную систему для общения с пользователем. Сообщения чата должны появляться один за другим, каждый из которых имеет определенную задержку. Я назвал элементы, используя параметр id от 1 до n, и я просто просматриваю идентификаторы, чтобы отображать их один за другим.

Я хочу настроить пользовательскую задержку для каждого сообщения, не записывая ничего внутри файла.js, который я использую. Лучший способ - записать его внутри тега html, например: <p class="msg" id="1" delay="0">. Как я могу получить доступ к значению, хранящемуся в задержке, когда я обращаюсь к элементу с помощью $("#1")?

Sibbo 09 дек. 2013, в 18:24

Источник

Теги:

jquery

html5

3 ответа

1

Прежде всего, вы хотите использовать атрибуты данных. Вместо delay используйте delay data-delay, например:

<p data-delay="0">Text</p>

Вы можете получить доступ к этому в jQuery двумя способами, используя $('p').data('delay') или $('p').attr('data-delay').

Во-вторых, вы, вероятно, не хотите использовать числа в качестве своего идентификатора. CSS не может ссылаться на идентификаторы по значениям, начинающимся с цифр. Если у вас должен быть атрибут, который является числом, я рекомендую вместо этого использовать data-id.

Jake 09 дек. 2013, в 14:53

1

Вы можете использовать элементы данных. Это означало бы, что в ваших тегах HTML вы добавляете data-custom = 'value', а затем вы можете получить к нему доступ с помощью $("selector").data("custom").

В этом случае это означало бы: <p class="msg" id="1" data-delay="0"> и использовать его с $("p.msg").data("delay").

skiwi 09 дек. 2013, в 14:44

Ещё вопросы

PSL · Accepted Answer · 2013-12-09T15-32-00.000Z

Используйте вместо этого атрибут data- * и используйте jquery data api, иначе вы можете просто сделать $('#1').attr('delay') но с использованием data- * будет более правильным.

<p class="msg" id="1" data-delay="0">

а также

$('#1').data('delay'); //This will return 0 as a number rather than as a string which would if you access it with attr

Здесь вы можете увидеть большую разницу. Демо

+1 У меня были сомнения, почему все предпочитают атрибуты data-* . Но с вашим демо это очень ясно и понятно. Но это можно исправить с помощью синтаксического анализа ( parseInt($('#2').attr('delay'),10) ), верно?
@PraveenJeganathan Да Правин. Используя атрибут данных, вы получаете такую гибкость (помимо исправления проблемы добавления недопустимой delay атрибута в html). Вам не нужно обращаться к DOM (избегая операции DOM при выполнении attr ), а просто получать доступ из внутреннего кеша с использованием data api (или dataSet.delay в случае vanilla JS), и он может dataSet.delay что угодно, например, объект, массив, числовые значения и т. д., не анализируя их отдельно.