Jquery Onclick и ссылка на объект нажали - PullRequest
Новая
       11

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

17 голосов
/ 25 июня 2009

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

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

Ответы [ 5 ]

30 голосов
/ 25 июня 2009

Использование 

<strong>$(this)</strong>
8 голосов
/ 25 июня 2009

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

$("#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 () для просмотра объектов, которые вы можете использовать!

6 голосов
/ 25 июня 2009

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

$('#tagList li').click(function() {
  $(this).css({ color: 'red' });
});
6 голосов
/ 25 июня 2009

Да, ключевое слово this ссылается на элемент DOM, по которому щелкнули. Вы можете «обернуть» это так: 

$(this)

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

0 голосов
/ 18 июня 2019

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

Также рекомендуется не добавлять щелчок 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
});

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

...