Згідно стандарту html деякий набір елементів на сторінці може мати загальні класи, проте id елементів повинні бути унікальними. Можливість використання класів значно спрощує роботу з елементами. Скажімо, ми можемо задавати стилі для них, а так само працювати з ними за допомогою jQuery. Іноді виникає необхідність дізнатися id будь-яких елементів, за яким був зроблений клік.
Для початку представимо наш базовий набір елементів на сторінці, з яким ми будемо працювати:

Для того щоб дізнатися був клік по одному з елементів, ми будемо використовувати обробники подій. В jQuery це традиційно робиться таким чином, за основу береться ім’я класу, присвоєного нашим ключовим елементам. Після кліка на який-небудь елемент, за допомогою обробника події ми будемо визначати точний елемент, за яким був зроблений клік. Цей метод досить універсальний.
Крім цього, для визначення id елемента в jQuery немає окремої функції, яка це справа виконує. Однак це легко компенсується можливістю використання універсальної функції attr. Дана функція дозволяє отримувати атрибути елемента, а як ми знаємо, id елемента так само є атрибутом. Таким чином, ми отримуємо можливість оперувати покажчиком $(this) який буде посилатися на той елемент, на який був проведений клік.

$(document).ready(function(){
$(‘.elemClass’).click(function() {
console.log($(this).attr(‘id’));
});
});

За аналогією, замість $(this) ми можемо скористатися вказівником this, який по суті є DOM аналогом цього об’єкта. Зрозуміло, між ними є різниця, але для наших завдань це не настільки принципово.

$(document).ready(function(){
$(‘.elemClass’).click(function() {
console.log(this.id);
});
});

Ще один спосіб реалізації, нічим не кращий і не гірший за попередні — це використання об’єкта, який буде містити посилання на елемент, за яким був зроблений клік:

$(document).ready(function() {
$(“.elemClass”).click(function(event) {
console.log(event.target.id);
});
});
Додав: htmaker, 14.06.2016 р.
(1 голосів, середній: 5,00 з 5)

Завантаження…

Діліться з друзями:

См. також:


Мета тег robots, приклади використання
Рубрика: Html, CSS, Javascript, SEO

Stimed – задаємо CSS-стилі по часу
Рубрика: Html, CSS, Javascript

Небезпека використання атрибуту target=”_blank”
Рубрика: Html, CSS, Javascript, Інф. безпека

Нескінченна анімація обертання на CSS
Рубрика: Html, CSS, Javascript

Анімація обертання при наведенні курсору
Рубрика: Html, CSS, Javascript

Стилізація виділення номера телефону до мобільних браузерах
Рубрика: Html, CSS, Javascript

Список вибору на JQuery
Рубрика: Html, CSS, Javascript

Фіксований заголовок таблиці HTML
Рубрика: Html, CSS, Javascript

Ефекти кнопок для сайту
Рубрика: Html, CSS, Javascript