В процессе работы бывает, что требуется получить ID элемента jQuery по которому кликнул пользователь. На странице есть несколько таких элементов с одинаковыми классами, но с разными ID. В этом случае обработчик события клика вешается на общий класс, а не на каждый элемент. Как в этом случае получить ID? Какой от отдельной функции в JQuery не предусмотрено, но это можно сделать и другими способами.
Способ 1
Использование функции .attr() — возвращает или изменяет значение атрибутов у выбранных элементов страницы.
|
1 2 3 4 5 6 7 |
$(document).ready(function(){ $('.button').click(function() { var clickId = $(this).attr('id'); }); }); |
Способ 2
Использование функции .prop() — Возвращает или изменяет значение свойств выбранных элементов страницы.
|
1 2 3 4 5 6 7 8 |
$(document).ready(function(){ $('button').click(function(){ var clickId = $(this).prop('id'); alert(clickId); }); }); |
Замечание .prop() удобен для работы с атрибутами, не требующими указания значений (checked и disabled в input-элементах), в большинстве других случаев, для работы с атрибутами лучше использовать .attr(), поэтому в нашем случае использовать эту функцию не совсем правильно
Способ 3
Использование указателя this, который будет указывать не на объект типа jQuery, а на DOM-аналог этого объекта.
|
1 2 3 4 5 6 7 |
$(document).ready(function(){ $('.button').click(function(){ var clickId = this.id; }); }); |
Способ 4
Использование объекта event, который содержит данные о произошедшем событии.
|
1 2 3 4 5 6 7 |
$(document).ready(function() { $(".square").click(function(event) { var clickId = event.target.id; }); }); |
Избыточное количество методов )))))