О web-разработке
и даже немного больше...

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

Согласно стандарту 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);
    });
});
Опубликован: 14.06.2016 г.

См. также:

Загрузка файлов на сервер посредством Ajax
Отложенная загрузка изображений Lazy Load
Анимация набора текста на Typed.js
Анимация отсчёта на jquery-spincrement
Mega Dropdown — Меню для мобильной версии
Отслеживаем клик вне элемента на JQuery
Ajax-загрузка записей при скроллинге и нажатии кнопки
Stimed – задаем CSS-стили по времени

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

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

Комментарии
  • Загрузка...
Друзья сайта