jQuery 在JQuery中,如何将被点击的元素传递给onclick事件调用的方法
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/7519815/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
In JQuery, how to pass the element that was clicked to the method that is called on onclick event
提问by Barka
I have several of these lines on a page:
我在页面上有几行:
<div class="save-button" onclick="Save()">Save</div>
In my Save()method I want to manipulate the div that was clicked to call the Save()method. How do I pass that in (I think $(this)), without resorting to ids?
在我的Save()方法中,我想操纵被单击以调用该Save()方法的 div 。我如何在(我认为$(this))中传递它 ,而无需求助于 ids?
Many thanks!
非常感谢!
回答by Kalle H. V?ravas
Either remove the save()and use click()to catch the event:
删除save()并使用click()来捕获事件:
<div class="save-button">Save</div>
<script>
$('.save-button').click(function () {
// Now the div itself as an object is $(this)
$(this).text('Saved').css('background', 'yellow');
});
</script>
[ View output]
[查看输出]
Or if you insists on using such function as save():
或者,如果您坚持使用以下功能save():
<div onClick="save(this)">Save</div>
<script>
$(function () {
save = function (elm) {
// Now the object is $(elm)
$(elm).text('Saved').css('background', 'yellow');
};
});
</script>
[ View output]
[查看输出]
EDIT (2015):.on('click', function)
编辑 (2015): .on('click', function)
<div class="save-button">Save</div>
<script>
$('.save-button').on('click', function () {
// Now the div itself as an object is $(this)
$(this).text('Saved').css('background', 'yellow');
});
</script>
回答by Felix Kling
Inside the event handler, thisrefers to the clicked element. However, inside the function you call from the event handler, which is Save, thiswill refer to window.
在事件处理程序中,this指的是被点击的元素。但是,在您从事件处理程序调用的函数内部,也就是Save,this将引用 window。
You can explicitly set what thisshould refer to inside Savevia call[MDN](or apply):
您可以通过[MDN](或)显式设置this应在内部引用的内容:Savecallapply
onclick="Save.call(this, event || window.event);"
then you can use it inside the function as $(this):
那么你可以在函数内部使用它$(this):
function Save(event) {
// `this` refers to the clicked element
// `$(this)` is a jQuery object
// `event` is the Event object
};
Butas you are using jQuery, you really should do
但是当您使用 jQuery 时,您确实应该这样做
$('.save-button').click(Save);
to bind the event handler. Mixing markup with logic is not a good style. You should separate the presentation from the application logic.
绑定事件处理程序。将标记与逻辑混合不是一种好的风格。您应该将演示文稿与应用程序逻辑分开。
Orif you want Saveto accept an element as parameter, then just pass it:
或者,如果您想Save接受一个元素作为参数,则只需传递它:
onclick="Save(this);"
and with jQuery:
并使用 jQuery:
$('.save-button').click(function() {
Save(this);
});
回答by yoozer8
Simply refer to it as: $(this)
简单地将其称为: $(this)
回答by Gabe
Pretty straight forward...
很直接...
$('#myDiv').click(function(){
save($(this));
})
function save($obj){
$obj.css('border', '1px solid red');
}
回答by Kyle Trauberman
Inside the You can convert this to a jQuery object with Save()function thisrefers to the DOM element that was clicked.$(this).
您可以将其转换为 jQuery 对象Save()函数内部this指的是被点击的 DOM 元素。$(this)。
This refers to windowby default however, so you'll need to pass thisas a parameter of the Save function:
window但是,默认情况下这是指,因此您需要将其this作为 Save 函数的参数传递:
<div class="save-button" onclick="Save(this)">Save</div>
function Save(div) { }
now inside Save, you can use divto refer to the div that was clicked.
现在在 Save 中,您可以使用div来引用被单击的 div。
I was confused about how thisbehaved. This link helped me: http://www.quirksmode.org/js/this.html
我对this表现如何感到困惑。这个链接对我有帮助:http: //www.quirksmode.org/js/this.html

