我有以下 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 for Designers中查看Remy Sharp的一些截屏视频,它们非常有助于了解 jQuery 的工作原理,更好的是如何使用console.log()为了看到你可以使用的对象!
是的,this
关键字引用了被点击的 DOM 元素。你可以像这样“包装”它:
$(this)
这将允许您将其视为 jQuery 对象。
this关键字就是您要查找的内容。通常你会想要应用 jQuery 函数来完成你的工作。例子:
$('#tagList li').click(function() {
$(this).css({ color: 'red' });
});
添加将涵盖更多用例的新答案,特别是当您想要使用箭头函数时。
还建议您不要向 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
});
这可确保您定位到单击已注册的元素。如果您的按钮中有任何嵌套标记(例如 或 ),则事件目标可能是嵌套元素,而不是您想要分配点击的元素。