Включение датанодов в html путем сокрытия: хорошая идея?

Question

Я хотел бы добавить данные на html-страницу, которые будут отображаться только динамически (с помощью jquery). Данные в формате XML (так что фактически это часть HTML-домена).

Теперь я делаю это, скрывая css (.data { display:none; }) с помощью html вроде:

<div id="section1">
<h2>Section 1</h2>
    <p>A visible paragraph </p>
    <!-- data that has to do with section 1 -->
    <data class="data">
       <eg1>some data</eg1>
       <eg2>more data</eg2>
    </data>
</div>

Данные не отображаются и могут быть легко доступны с помощью jquery.

Хотя это, кажется, работает нормально, сейчас я хочу знать, в начале процесса, есть ли у этого способа некоторые недостатки, о которых я сейчас не думаю ...

ОБНОВЛЕНИЕ:

Конечно, это касается не HTML-тегов. Но я мог бы использовать

<div class="data">    
<div class="eg1>

так же легко, но даже тогда вопрос остается.

Спасибо за все комментарии!

Answer 1

Это плохая идея. Хорошая идея будет использовать форму

<form name="data">
<input type="hidden" name="eg1" value="Some data" />
<input type="hidden" name="eg2" value="Some data" />
</form>

Вы можете легко получить к нему доступ через jQuery, используя document.data.eg1 и document.data.eg2 и т. Д.

Как только вам нужно показать данные, извлеките их через jQuery и заполните div.

Edit: Если вам нужно поместить его в разметку вместо скрытых полей ввода, используйте список определений

<dl>
   <dt>eg1</dt><dd>Somedata</dd>
   <dt>eg2</dt><dd>Somedata</dd>
   <dt>eg3</dt><dd>Somedata</dd>
</dl>

Answer 2

Если вы уже используете jQuery, вам следует выбрать jQuery.data() (http://api.jquery.com/jQuery.data/), который хранит данные в модели представления.

Вы можете сделать:

jQuery.data('myvar', 'myvalue');

изатем извлеките его обратно, просто используя

var myval = jQuery.data('myvar');

. Вы также можете прикрепить данные к элементу в вашем домене (он все еще не будет виден):

$('#my-data-div').data('whatever', 'somevalue');

и получить его:

var myval = $('#my-data-div').data('whatever');

Надеюсь, это поможет! :)

Answer 3

Недостаток заключается в том, что нет не-js отступления.Для надежного кода вы должны создать статический HTML-код, чтобы все отображалось.И затем вы используете Javascript, чтобы скрыть «скрытые» данные и позволить пользователю снова показать их через ссылки / fns / что угодно.

Это полезно, потому что пользователи без Javascript все еще могут видеть весь контент, а такжесканеры поисковых систем (или другие сканеры / боты), которые также интерпретируют видимость, могут найти это полезным.