Я делал это и в прошлом несколькими способами.
Идея $('selector').data, вероятно, является одним из наиболее полезных методов.Мне нравится этот способ хранения данных, потому что я могу хранить данные в логической, интуитивно понятной и упорядоченной форме.
Допустим, у вас есть вызов ajax, который возвращает 3 статьи при загрузке страницы.Статьи могут содержать данные, относящиеся к заголовку, дате / времени, источнику и т. Д. Предположим также, что вы хотите показать заголовки, а при нажатии на заголовок вы хотите показать полную статью и ее детали.
Чтобы немного проиллюстрировать концепцию, скажем, мы получаем json, который выглядит примерно так:
{
articles: [
{
headline: 'headline 1 text',
article: 'article 1 text ...',
source: 'source of the article, where it came from',
date: 'date of the article'
},
{
headline: 'headline 2 text',
article: 'article 2 text ...',
source: 'source of the article, where it came from',
date: 'date of the article'
},
{
headline: 'headline 3 text',
article: 'article 3 text ...',
source: 'source of the article, where it came from',
date: 'date of the article'
}
]
}
Из вызова ajax, подобного этому.,.
$.ajax({
url: "news/getArticles",
data: { count: 3, filter: "popular" },
success: function(data){
// check for successful data call
if(data.success) {
// iterate the retrieved data
for(var i = 0; i < data.articles.length; i++) {
var article = data.articles[i];
// create the headline link with the text on the headline
var $headline = $('<a class="headline">' + article.headline + '</a>');
// assign the data for this article's headline to the `data` property
// of the new headline link
$headline.data.article = article;
// add a click event to the headline link
$headline.click(function() {
var article = $(this).data.article;
// do something with this article data
});
// add the headline to the page
$('#headlines').append($headline);
}
} else {
console.error('getHeadlines failed: ', data);
}
}
});
Идея заключается в том, что мы можем сохранять связанные данные в элементе dom и получать доступ / манипулировать / удалять эти данные в более позднее время, когда это необходимо.Это сокращает количество возможных дополнительных вызовов данных и эффективно кэширует данные для определенного элемента dom.
в любое время после добавления ссылки на заголовок в документ, к данным можно получить доступ через селектор jquery.Чтобы получить доступ к данным статьи для первого заголовка:
$('#headlines .headline:first()').data.article.headline
$('#headlines .headline:first()').data.article.article
$('#headlines .headline:first()').data.article.source
$('#headlines .headline:first()').data.article.date
Доступ к вашим данным через селектор и объект jquery является довольно аккуратным.