У меня есть следующее выражение jQuery. Внутри функции мне нужна ссылка на объект, который был нажат, есть ли способ сделать это?
$('#tagList li').click(function() {
/* contents */
});
У меня есть следующее выражение jQuery. Внутри функции мне нужна ссылка на объект, который был нажат, есть ли способ сделать это?
$('#tagList li').click(function() {
/* contents */
});
Используйте
$(this)
вы можете использовать возвращаемое значение
$("#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() для просмотра объектов, которые вы можете использовать!
Да, ключевое слово this
ссылается на элемент DOM, который был нажат. Вы можете "обернуть" его так:
$(this)
Это позволит вам рассматривать его как объект jQuery.
Это ключевое слово - это то, что вы ищете. Часто вам нужно применить функцию jQuery к этому, чтобы выполнить свою работу. Пример:
$('#tagList li').click(function() {
$(this).css({ color: 'red' });
});
Добавление нового ответа, который будет охватывать больше вариантов использования, особенно когда вы хотите использовать функции стрелок.
Также рекомендуется не добавлять щелчок 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
});
Это гарантирует, что вы ориентируетесь на элемент, на котором был зарегистрирован клик. Если у вас есть какая-либо вложенная разметка внутри вашей кнопки (например, или), то возможно, что целью события будет вложенный элемент, а не элемент, которому вы хотите назначить щелчок.