HTML и JavaScript: Как хранить данные, относящиеся к элементам HTML

Существует официальная документация функции jQuery data

$('li').data('userid',uid); // sets the value of userid
uid = $('li').data('userid'); // retrieves the value of userid

: http://docs.jquery.com/Data

Возможно использование настраиваемых атрибутов, поэтому для элемента списка пользователя добавьте атрибуты для переменных:

<li uid="theuserid" ustatus="thestatus"></li>

Значения затем могут быть получены с помощью функции attr:

$("li").attr("uid")

И

$("li").attr("ustatus")

Примечание : Очевидно, что необходимо изменить селекторы.

Обратите внимание, что существуют разные мнения по поводу использования настраиваемых атрибутов - однако это должно подходить для всех основных браузеров. Это также наименее сложное решение, о котором я могу думать. Для получения данных не требуется переходить к родственным элементам или находить элементы поблизости, что может добавить небольшие накладные расходы на обработку - я стараюсь свести к минимуму количество дополнительного раздувания, которое я добавляю в DOM, когда делаю такие вещи.

Данные jQuery

Если вы хотите сохранить пользовательские данные для объекта jQuery, используйте функцию данных .

$('#myField').data('name', 'Jack');
var name = $('#myField').data('name');

Данные HTML5- * Атрибуты

Вы также можно использовать атрибуты HTML5 data - * , хотя API для доступа к ним лишь частично поддерживаются различными браузерами. Вот еще некоторая информация об этом .

<div data-userid="123" class="user-row">

программно:

$('#myElement').attr('data-fruit', 'apple');
// or
document.getElementById('myElement').dataset.fruit = 'apple';

Скрытые поля

Если вы хотите делать что-то по-старому, совместимым с браузером, и вставлять метаданные прямо в свой HTML-код, вы можете использовать скрытые поля. Это немного грубовато, но достаточно просто сделать.

<input type="hidden" name="UserID" value="[userid]" />

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

В этом случае я думаю, что настраиваемые атрибуты могут оказаться излишними. Вы можете сохранить идентификатор пользователя в атрибуте id , поскольку в списке будет только один экземпляр пользователя, верно? Кроме того, статус пользователя может быть сохранен в атрибуте класса . Таким образом, каждому пользователю может быть назначен разный стиль в CSS, например зеленый для активного, желтый для неактивированной учетной записи и красный для приостановленной учетной записи.

Однако код для получения статуса будет немного сложнее по сравнению с использованием настраиваемого атрибута (но только если вы также хотите иметь несколько классов). С другой стороны, при таком подходе HTML будет проверяться, тогда как с настраиваемыми атрибутами - нет.

<ul id="userList">
    <li id="uid123" class="active">UserName X</li>
    <li id="uid456" class="suspended">Mr. Troll</li>
</ul>

/**
 * Simple function for searching (strict) for a value in an array
 * @param array arr The array to look in
 * @param mixed val The value to look for in arr. Note that the value is looked for using strict comparison
 * @return boolean true if val is found in arr, else false
 */
function searchArray(arr, val) {
    for(var i = 0, len = arr.length; i < len; i++) {
        if(arr[i] === val) {
            return true;
        }
    }
    return false;
}

/**
 * Gets a known status from a string of class names. Each class name should be separated
 * by a space.
 * @param string classNames The string to check for a known status
 * @return string|false The status if found in classNames, else false
 */
function getStatus(classNames) {
    // The different statuses a user can have. Change this into your own!
    var statuses = ['active', 'suspended', 'inactive'], 
        nameArr = classNames.split(" ");
    for(var i = 0, nameLen = nameArr.length; i < nameLen; i++) {
        // If we find a valid status among the class names, return it
        if(searchArray(statuses, nameArr[i])) {
            return nameArr[i];
        }
    }
    return false; // We didn't find any known status in classNames
}

var id = $("li").attr("id"); // Fetches the id for the first user
var status = getStatus($("li").attr("class")); // Fetches the status of the first user

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

Вы можете хранить данные в классе определенного элемента. Для этого могут потребоваться дополнительные элементы оболочки, чтобы иметь возможность предоставить дополнительный класс для управления вашим CSS. Это также ограничивает формат сохраняемого содержимого. ID пользователя вполне может вписаться в атрибут класса.

Вы можете хранить данные в неиспользуемом href активированной ссылки Javascript. У этого есть дополнительная функция отображения данных в строке состояния как часть URL-адреса при ролловере. Например, вы можете сохранить "#userid" или даже просто "userid" в href.

Вы можете хранить данные в дополнительных элементах. Например, у вас может быть вложенный div с классом, который указывает хранилище, которое также запускает CSS для удаления элемента из отображения. Это наиболее общая и обширная поддержка, которую вы, вероятно, можете организовать на странице.

Вместо вложенного div вы также можете использовать вложенные теги ввода с type = "hidden". Это отчасти более ожидаемый / традиционный и не требует CSS, чтобы убрать их с экрана. Вы можете использовать атрибут id для идентификации этих входных данных, или вы можете использовать местоположение на странице. Например, поместите их внутри ссылки, по которой нажимает пользователь, а затем просто выполните поиск внутри текущей ссылки в обработчике onclick.

Это наиболее общая и обширная поддержка, которую вы, вероятно, можете организовать на странице.

Вместо вложенного div вы также можете использовать вложенные теги ввода с type = "hidden". Это отчасти более ожидаемый / традиционный и не требует CSS, чтобы убрать их с экрана. Вы можете использовать атрибут id для идентификации этих входных данных, или вы можете использовать местоположение на странице. Например, поместите их внутри ссылки, по которой нажимает пользователь, а затем просто выполните поиск внутри текущей ссылки в обработчике onclick.

Это наиболее общая и обширная поддержка, которую вы, вероятно, можете организовать на странице.

Вместо вложенного div вы также можете использовать вложенные теги ввода с type = "hidden". Это отчасти более ожидаемый / традиционный и не требует CSS, чтобы убрать их с экрана. Вы можете использовать атрибут id для идентификации этих входных данных, или вы можете использовать местоположение на странице. Например, поместите их внутри ссылки, по которой нажимает пользователь, а затем просто выполните поиск внутри текущей ссылки в обработчике onclick.

или вы можете использовать местоположение на странице. Например, поместите их внутри ссылки, по которой нажимает пользователь, а затем просто выполните поиск внутри текущей ссылки в обработчике onclick.

или вы можете использовать местоположение на странице. Например, поместите их внутри ссылки, по которой нажимает пользователь, а затем просто выполните поиск внутри текущей ссылки в обработчике onclick.

Чтобы ответить на вопрос «как поместить это в документ в первую очередь», я предложите макет, подобный этому:

<ul id="users">
    <li id="someUserId" class="someStatus">Some Username</li>
    <li id="someOtherUserId" class="someOtherStatus">Some Username</li>
</ul>

Это позволяет вам легко выбрать много информации о ваших пользователях:

$('#users > li') // all user elements
$('.someStatus') // all users of a particular status

Затем в ваших обработчиках событий также легко получить текущий статус:

$(this).attr('class') //get current status once you have a user element selected.

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

Существует множество споров о том, что лучше использовать. Вы можете хранить данные множеством способов, и все они делают кого-то счастливым - пользовательские атрибуты, конечно, не будут проверяться, если вы используете XHTML, а использование классов для хранения одного или двух бит данных в лучшем случае неуклюже и только ухудшается с количество вещей, которые вы хотите знать. Лично я не только не большой поклонник XHTML, но и не являюсь нацистом в области валидации, поэтому рекомендую использовать настраиваемые атрибуты.

Однако есть вариант, который согласовывает настраиваемые атрибуты со стандартами: data- атрибуты. Как пишет Джон Ресиг (автор jQuery) в своем блоге , это новый атрибут, представленный в HTML5, который позволяет вам указывать пользовательские атрибуты данных с префиксом data- . Таким образом, совершенно допустимый элемент может выглядеть так:

<ul>
    <li data-userid='5' data-status='active'>Paolo Bergantino</li>
</ul>

Это имеет положительную сторону: пока вы все еще используете настраиваемые атрибуты, которые могут быть плохими, если вы используете XHTML, ваш код будет очень хорошо стареть, как и таким образом мы будем хранить данные, относящиеся к конкретному элементу в будущем.

Дополнительные материалы для чтения: Атрибуты> Классы: настраиваемые атрибуты DOM для развлечения и прибыли.

Плагин метаданных для jquery - это ваш ответ.

<html >
<head>
<script src="/js/jquery-1.3.2.js"></script>
<script src="/js/jquery.metadata.js"></script>
</head>
<body>
<ul>
<li type="text" class="{UID:'1',status:'alive'}">Adam</li>
<li type="text" class="{UID:'2',status:'alive'}">Bob</li>
<li type="text" class="{UID:'3',status:'alive'}">Carol</li>
</ul>
<script>
$('li').each(function(){window.console.log($(this).metadata().UID)});
</script>
</body>
</html>