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的新手，我强烈建议您可以在 Remy Sharp中看到来自 jQuery for Designers 的一些截屏视频，他们非常了解jQuery的工作原理，更好的是，如何使用 console.log（）来查看可以使用的对象！

Answer 3

是的，this关键字引用了单击的DOM元素。你可以像这样“包装”它：

$(this)

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

Answer 4

此关键字是您正在寻找的。通常，您会希望将jQuery函数应用于 this 来完成您的工作。例如：

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

Answer 5

添加一个涵盖更多用例的新答案，尤其是当您要使用箭头功能时。

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

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

在我的示例中，我将为click分配给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
});

这可确保您定位的是点击所注册的元素。如果您的按钮内有任何嵌套标记（例如或），则事件目标可能是嵌套元素，而不是您想要将点击分配给的元素。

Jquery Onclick和对象的引用被点击

5 个答案: