HREF.KZ

Блог о WEB-разработке и не только…

Как узнать id элемента на котором был сделан клик (jQuery)

Просмотров: 10 161

Согласно стандарту html некоторый набор элементов на странице может иметь общие классы, однако id элементов должны быть уникальными. Возможность использования классов значительно упрощает работу с элементами. Скажем, мы можем задавать стили для них, а так же работать с ними посредством jQuery. Иногда возникает необходимость узнать id каких либо элементов, по которым был произведен клик.
Для начала представим наш базовый набор элементов на странице, с которым мы будем работать:

<div class="elemClass" id="first">
<div class="elemClass" id="second">

Для того чтобы узнать был ли клик по одному из элементов, мы будем использовать обработчики событий. В 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);
    });
});

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *