Отримати атрибут data через jquery

Цей блок виводити циклом, тому значення data-user-email та data-event-id різні. Як отримати значення data атрибутів при натисканні на кнопку delete-event у поточному блоці.

3 відповіді 3

Через нативний метод об'єкта Node у ванільному JS.

$(".delete-event").on("click", function() < var var email = $(this).dataset.userEmail; >);

closest - для кожного з обраних елементів, closest() буде шукати найближчий відповідний елемент з числа наступних: сам обраний елемент, його батько, його прабатько, і так далі, до початку дерева DOM

$('.delete-event').on('click', function() < var innerBlock = $(this).closest('.event-div'); console.log('email: ' + $(innerBlock) ).data().userEmail + ', eventId: ' + $(innerBlock).data().eventId); var innerBlock = $(this).closest('.event-div')[0]; // var innerBlock = this.closest('.event-div'); .userEmail + ', eventId: ' + innerBlock.dataset.eventId);

[email protected]" data-event-id="eventId666" >  Видалити 666

[email protected]" data-event-id="eventId333" >  Видалити 333

[email protected]" data-event-id="eventId999" >  Видалити 999

Використання data-* атрибутів

HTML5 спроектований з можливістю розширення даних асоційованих з будь-яким елементом, але водночас необов'язково мають певне значення. data-* атрибути дозволяють зберігати додаткову інформацію у стандартних елементах HTML, без хаків на кшталт нестандартних атрибутів, зайвих DOM-властивостей чи Node.setUserData() .

Синтаксис HTML

Синтаксис простий - будь-який атрибут, ім'я якого починається з data-, є data-* атрибутом. Припустимо, у нас є стаття, і ми хочемо зберегти додаткову інформацію без візуального подання. Для цього можна використовувати data-атрибути:

Доступ до JavaScript

Читання data-атрибутів JavaScript здійснюється також просто. Для цього можна використовувати метод getAttribute() з параметром, що дорівнює повному імені атрибута. Але є простий спосіб, використовуючи об'єкт dataset .

Щоб отримати data -атрибут можна взяти властивість об'єкта dataset з ім'ям, що дорівнює частині імені атрибута після data- (зверніть увагу, що дефіси в імені перетворюються на camelCase).

var article = document.getElementById('electriccars'); article.dataset.columns // "3" article.dataset.indexNumber // "12314" article.dataset.parent // "cars"

Кожна властивість є рядком і може бути прочитана та записана. У наведеному вище прикладі виконання коду article.dataset.columns = 5 призведе до того, що нове значення атрибута дорівнюватиме "5" .

Доступ до CSS

Зауважимо, що data-атрибути є звичайними HTML-атрибутами, до яких можна отримати доступ до CSS. Наприклад, щоб показати батьківські дані про статтю можна використовувати контент, що генерується, і CSS функцію attr() :

Також можна використовувати селектори атрибутів CSS для зміни стилів відповідно до даних:

article[data-columns="3"] < width: 400px; >article[data-columns="4"]

Побачити, як це працює, можна в прикладі на JSBin.

Data-атрибути також можуть використовуватися для зберігання інформації, яка постійно змінюється, наприклад, рахунок у грі. Використовуючи CSS селектори та можливості JavaScript, можна створювати деякі витончені ефекти, без необхідності писати свої функції відображення.Перегляньте скринкаст, щоб побачити більше прикладів, що використовують згенерований контент і переходи на CSS.

Проблеми

Не зберігайте дані, які повинні бути видимими та доступними в data-атрибутах. Справа в тому, що допоміжна техніка (assistive technology) може не отримати до них доступ.

Сумно, що все просте і корисне в цьому житті не дістається безкоштовно. Internet Explorer 11+ підтримує цей стандарт, але все більш ранні версії не підтримують dataset . ) . Також, продуктивність читання data-атрибутів у порівнянні зі зберіганням цих даних у сховищі даних JS значно гірше. Використання dataset ще повільніше, ніж читання даних із getAttribute() .

Тим не менш, для метаданих користувача, пов'язаних з елементами, data-атрибути є відмінним рішенням.

Дивіться також

Використання data-атрибутів у HTML, CSS, JavaScript та jQuery

HTML5 у своєму стандарті приніс чимало нового, і одним з таких нововведень стала можливість додавати будь-які атрибути користувача в розмітку сторінки з використанням чарівної приставки, або префікса data- , тобто. дані. Причому використовувати ці дані ви можете як у CSS, так і JavaScript.

Використання data-атрибутів у HTML та CSS

Для того, щоб записати data-атрибути в HTML, не потрібно вигадувати нічого нового.Оскільки це стандартний для HTML5 атрибут, то в будь-якому тезі, що відкриває, ви ставите пробіл після назви цього тега або іншого атрибуту, записуєте обов'язковий префікс data- і додаєте будь-яке слово, пов'язане за змістом з тим значенням, яке ви хочете в цей атрибут помістити.

Наприклад, атрибути data-text-top і data-text-bottom в розмітці нижче потрібні для того, щоб використовувати текст в них зверху і знизу у псевдоелементах ::before і ::after, що виїжджають при наведенні на фото, відповідно.

Результат використання data-атрибутів у HTML та CSS можна переглянути нижче. Для цього необхідно навести курсор миші на будь-яке зображення.

See the Pen by Elen (@ambassador) on CodePen.

Роботу цього коду неможливо уявити без використання властивості transition для анімації при наведенні на картинку чи блок. Плюс для властивості content, обов'язкового для псевдоелементів :: before і :: after, можна задати функцію attr (data-text-top), вказавши в дужках будь-який data-або інший атрибут замість data-text-top.

Використання data-атрибутів у JavaScript та jQuery.

Однак це ще не все. У тому випадку, коли частина інформації має бути деякий час прихована від користувача, дуже легко її сховати в data-атрибути, а потім витягти за допомогою JavaScript або jQuery. Саме так роблять розробники багатьох плагінів фотогалерей чи слайдерів. Наприклад, щоб додати перегляд зображення у модальному вікні у фотогалереї Fancybox, потрібно в розмітці вказати атрибут data-fancybox , а атрибут data-caption використовується для виведення заголовка під зображенням:

І це все, що потрібно зробити для роботи плагіна, за винятком підключення файлів jQuery і файлів самого плагіна Fancybox.

Раніше для аналогічних цілей розробники часто використовували атрибут class або створювали нестандартні атрибути, але атрибут class насправді не призначений для цього, та й на нестандартну розмітку "лається" валідатор W3C. З введенням же data-атрибутів в HTML5 зберігати і витягувати дані з HTML стало дійсно легко і приємно, тим більше, що для цього є властивості і методи як в JavaScript, так і в jQuery. Розглянемо їх докладніше.

Доступ до data-атрибутів за допомогою JavaScript

Класичний JavaScript називають ще нативним або ванільним. З появою HTML5 його ядро ​​доповнилося властивістю dataset, яке й дозволяє маніпулювати значеннями data-атрибутів. Крім того, вже дуже давно в JS існує метод getAttribute() , який дає нам можливість отримати будь-який атрибут, причому не тільки з приставкою data-, але і такі відомі, як src зображення або href посилання.

Розглянемо ці способи нативного JavaScript докладніше.

Властивість HTMLElement.dataset

Властивість dataset (набір даних у перекладі з англійської) дозволяє легко отримати доступ до атрибутів даних будь-якого HTML-елемента. Розглянемо наступний приклад.

Натисніть на Pen data-attribute JavaScript control by Elen (@ambassador) on CodePen.

Як працює властивість dataset?

Коли ви вибираєте окремі властивості за допомогою dataset, префікс data- видаляється з назви атрибута. Якщо data-атрибут містить одне слово після префікса data-, то саме воно вказується після цієї властивості з маленької літери (у нижньому регістрі), наприклад, dataset.age для атрибуту data-age або dataset.speciality для data-speciality. Якщо ж у data-атрибуті міститься кілька слів, розділені рисками (дефісами), то рисочки видаляються, і властивість записується в стилі camelCase, тобто. перше слово з маленької літери, а кожне наступне слово із великої літери.У прикладі так записується атрибут data-phone-number - він перетворюється на dataset.phoneNumber . Аналогічно JavaScript записуються стильові властивості елементів.

Зверніть увагу, що у скрипті властивість dataset.name використовується як для отримання значення відповідного атрибуту data-name , так і для призначення цього атрибуту та його значення, коли такого атрибуту немає. У прикладі це data-name . Для видалення цього атрибуту в коді ми використовували оператор delete.

Методи getAttribute()/setAttribute()

Тепер давайте подивимося, як можна використовувати метод getAttribute('attribute') для отримання значення data-атрибутів та метод setAttribute('attribute', 'value') для додавання data-атрибута з потрібним значенням. Перепишемо код прикладу, наведеного вище.

Натисніть на Pen data-attribute JavaScript control getAttribute() method by Elen (@ambassador) on CodePen.

У чому різниця? По-перше, getAttribute() - це метод, і значення атрибуту в ньому передається в дужках у вигляді рядка (тобто в лапках). По-друге, у дужках потрібно передати повне ім'я атрибута разом із префіксом data- , щоб отримати значення атрибута. Тобто. для data-phone-number потрібно записати getAttribute('data-phone-number') , не змінюючи регістр символів і прибираючи префікс data- .

Доступ до атрибутів даних за допомогою jQuery. Метод data()

Звичайно ж, бібліотека jQuery не могла обійти своєю увагою доступ та зміну data-атрибутів. Для цього в ній є метод data() , щоб додати новий або змінити існуючий data-атрибут, а також метод removeData() видалення data-атрибута. Давайте розглянемо наш приклад, але у синтаксисі jQuery. Нагадаю, що для цього обов'язково потрібно спочатку підключити бібліотеку.

Натисніть на Pen data-attribute JavaScript control getAttribute() method by Elen (@ambassador) on CodePen.

Як неважко помітити, код коду data() використовується дуже часто, причому в дужках в лапках, тобто. у рядковому вигляді ми вказуємо тільки назву data-атрибута після рисочки, без префікса data- . Щоб видалити значення атрибута data-name, у коді використовується метод removeData('name') .

Ще хотілося б звернути увагу на атрибут data-phone-number . Він може бути записаний як з використанням рисочки у вигляді рядка data('phone-number') , так і стороку camelCase-синтаксисі як data('phoneNumber') . Спробуйте змінити його запис, перейшовши до редагування коду на codepen.io при натисканні кнопки Приклад розв'язання задачі зі складовими умовами та data-атрибутами

У статті "Прості завдання JavaScript" ви можете знайти завдання на складові умови, в якій потрібно написати код, що перевіряє відповіді користувача на 4 запитання і пропонує йому певні книги. Завдання можна вирішити за допомогою низки умов if. else, використання масивів об'єктів та методів для роботи з масивами, але також можна зробити список з data-атрибутами, що мають значення 0 або 1. А список питань подати за допомогою кількох прапорців. Варіант рішення буде таким:

See the Pen Складові умови JavaScript by Elen (@ambassador) on CodePen.

Сподіваюся, що після прочитання цієї статті у вас з'явилися підстави використовувати data-атрибути в HTML, CSS, JavaScript/jQuery для зберігання потрібної інформації.