19

我有以下 jQuery 表达式,在函数内部我需要引用被点击的对象,有没有办法做到这一点?

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

5 回答 5

34

采用

$(this)

于 2009-06-25T13:08:30.250 回答
9

你可以使用返回值

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

或者,如果您愿意,您可以简单地指向 jQuery 模式中的对象

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

如果您是 jQuery 新手,我强烈建议您在jQuery for Designers中查看Remy Sharp的一些截屏视频,它们非常有助于了解 jQuery 的工作原理,更好的是如何使用console.log()为了看到你可以使用的对象!

于 2009-06-25T13:17:14.367 回答
6

是的,this关键字引用了被点击的 DOM 元素。你可以像这样“包装”它:

$(this)

这将允许您将其视为 jQuery 对象。

于 2009-06-25T13:08:40.733 回答
6

this关键字就是您要查找的内容。通常你会想要应用 jQuery 函数来完成你的工作。例子:

$('#tagList li').click(function() {
  $(this).css({ color: 'red' });
});
于 2009-06-25T13:09:09.860 回答
0

添加将涵盖更多用例的新答案,特别是当您想要使用箭头函数时。

还建议您不要向 li 元素添加 JS 点击。相反,您应该使用嵌套在此元素内的按钮或锚点(可点击的东西)。

由于您单击的元素可能是子元素,因此您需要确保定位正确的元素。

在我的示例中,我将点击分配给 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
});

这可确保您定位到单击已注册的元素。如果您的按钮中有任何嵌套标记(例如 或 ),则事件目标可能是嵌套元素,而不是您想要分配点击的元素。

于 2019-06-18T18:52:51.233 回答