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 回答