Jquery Onclick и ссылка на объект нажали

Question

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

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

Answer 1

Используйте

$(this)

Answer 2

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

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

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

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

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

Answer 3

Да, ключевое слово this ссылается на элемент DOM, по которому щелкнули. Вы можете & Quot; wrap & Quot; это так:

$(this)

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

Answer 4

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

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

Answer 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
});

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