Jquery的ONCLICK和参考点击对象

StackOverflow https://stackoverflow.com/questions/1043797

  •  20-08-2019
  •  | 
  •  

题

我有以下的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，我强烈建议您看到从的雷米夏普 <在/强>的 的jQuery为设计者 下，它们是伟大的了解jQuery的运行，并一点点更好，但如何使用的console.log（）为了看清物体，您可以使用！

是，则this关键字引用被点击的DOM元素。你可以“包装”这样的：

$(this)

这将允许你把它作为一个jQuery对象。

在这个的关键字是什么，你所期待的。通常你会希望jQuery的功能应用到的这个的做你的工作。例如：

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

添加新的答案，将覆盖更多的使用情况，特别是当你想使用箭头功能。

它也建议您不要在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
});

这确保了您的目标，该点击已经登记在元件。如果你有你的按钮内的任何嵌套标记（如或），那么它是可能的事件目标是嵌套元素，而不是元素你想分配点击。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top