В процессе работы бывает, что требуется получить ID элемента jQuery по которому кликнул пользователь. На странице есть несколько таких элементов с одинаковыми классами, но с разными ID. В этом случае обработчик события клика вешается на общий класс, а не на каждый элемент. Как в этом случае получить ID? Какой от отдельной функции в JQuery не предусмотрено, но это можно сделать и другими способами.
Содержание
- Способ 1
- Способ 2
- Исходный код желтого блока выше:
- Смотрите также:
Способ 1
Использование функции .attr() — возвращает или изменяет значение атрибутов у выбранных элементов страницы.
Способ 2
Использование функции .prop() — Возвращает или изменяет значение свойств выбранных элементов страницы.
Данный материал навеян довольно большим числом запросов о реализации подобного метода, а также отсутствием внятного решения в Интернете.
Итак, для чего именно нужен данный метод мы касаться не будем, ибо вариантов может быть много, и сразу перейдем к реализации. Подключаем jQuery. Повесим на событие «click» по всей области body анонимную функцию, принимающую аргумент event. В этом объекте и будет содержаться вся информация о событии. Чтобы получить объект, нужно обратиться к свойству event.target. Чтобы получить id объекта — event.target.id
Кроме того, объект event также содержит другие весьма полезные данные, например:
- event.target — объект, в котором сработал обработчик события
- event.target. >click me!
Исходный код желтого блока выше:
Смотрите также:
Как сделать простой калькулятор для сайта
Как быстро обработать большое количество фотографий и вставить их в html?
Всплывающая подсказка на jQuery
Появление (исчезновение) элемента по клику на JavaScript и на jQuery
Согласно стандарту html некоторый набор элементов на странице может иметь общие классы, однако >
Для начала представим наш базовый набор элементов на странице, с которым мы будем работать:
Для того чтобы узнать был ли клик по одному из элементов, мы будем использовать обработчики событий. В jQuery это традиционно делается таким образом, за основу берется имя класса, присвоенного нашим ключевым элементам. После клика на какой-либо элемент, посредством обработчика события мы будем определять точный элемент, по которому был произведен клик. Этот метод довольно универсален.
Кроме этого, для определения id элемента в jQuery нет отдельной функции которая это дело выполняет. Однако это легко компенсируется возможностью использования универсальной функции attr. Данная функция позволяет получать атрибуты элемента, а как мы знаем, id элемента так же является атрибутом. Таким образом, мы получаем возможность оперировать указателем $(this) который будет ссылаться на тот элемент, на который был произведен клик.
По аналогии, вместо $(this) мы можем воспользоваться указателем this, который по сути является DOM аналогом этого объекта. Разумеется между ними есть разница, но для наших задач это не столь принципиально.
Ещё один способ реализации, ничем не лучший и не хуже предыдущих — это использование объекта, который будет содержать ссылку на элемент, по которому был произведен клик:
Источник: