Подтвердить что ты не робот

JQuery Onclick и ссылка на объект, нажатый

У меня есть следующее выражение jQuery. Внутри функции мне нужна ссылка на объект, который был нажат, есть ли способ сделать это?

$('#tagList li').click(function() {
  /* contents */
});
4b9b3361

Ответ 1

Используйте

$(this)

Ответ 2

вы можете использовать возвращаемое значение

$("#tagList li").bind("click", function(e) {
    alert(e.currentTarget + ' was clicked!');
});

или если вы хотите, вы можете просто указать объект в режиме jQuery

$("#tagList li").bind("click", function(e) {
    alert($(this) + ' was clicked!');
});

если вы новичок в jQuery, Я настоятельно рекомендую видеть некоторые скринкасты из Remy Sharp в jQuery для дизайнеров, они прекрасно понимают, как работает jQuery, и еще лучше, как использовать console.log() для просмотра объектов, которые вы можете использовать!

Ответ 3

Да, ключевое слово this ссылается на элемент DOM, который был нажат. Вы можете "обернуть" его так:

$(this)

Это позволит вам рассматривать его как объект jQuery.

Ответ 4

Это ключевое слово - это то, что вы ищете. Часто вам нужно применить функцию jQuery к этому, чтобы выполнить свою работу. Пример:

$('#tagList li').click(function() {
  $(this).css({ color: 'red' });
});

Ответ 5

Добавление нового ответа, который будет охватывать больше вариантов использования, особенно когда вы хотите использовать функции стрелок.

Также рекомендуется не добавлять щелчок JS к элементу li. Вместо этого вы должны использовать кнопку или привязку (что-то кликабельное), вложенные в этот элемент.

Поскольку элемент, по которому вы щелкаете, может быть дочерним, вам нужно убедиться, что вы выбрали правильный элемент.

В моем примере я буду назначать щелчок для кнопки внутри li, а также для класса. Разметка будет просто:

<ul id="taglist">
  <li><button class="tag-button">Tag 1</button></li>
  <!-- ... -->
</ul>

Тогда javascript:

$('#tagList li button.tag-button').click((e) => {
  const thisButton = $(e.target).hasClass('tag-button')
    ? $(e.target) : $(e.target).closest('.tag-button');
  // do something with thisButton
});

Это гарантирует, что вы ориентируетесь на элемент, на котором был зарегистрирован клик. Если у вас есть какая-либо вложенная разметка внутри вашей кнопки (например, или), то возможно, что целью события будет вложенный элемент, а не элемент, которому вы хотите назначить щелчок.