Javascript 如何使用调用函数的元素的“this”引用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12456399/
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
How to use "this" reference of the element calling the function?
提问by Khaled
For example I want a function that is used by many elements to get the attributes of the calling element.
例如，我想要一个被许多元素使用的函数来获取调用元素的属性。
function example(){
var name = //name of the calling element "$(this).attr('name')"
}
<button name="somename1" onclick="example()">Button1</button>
<button name="somename2" onclick="example()">Button2</button>
so if the button named 'somename1' calls the function, the variable 'name' will be assigned to 'somename1' and so if 'somename2' called it, it will be assigned to 'somename2'
因此，如果名为“somename1”的按钮调用该函数，则变量“name”将被分配给“somename1”，因此如果“somename2”调用它，它将被分配给“somename2”
回答by xdazz
Use This:
使用这个：
function exampleFunction(exampleElement) {
var name = exampleElement.name;
}
<button name="somename1" onclick="exampleFunction(this)">Button1</button>
<button name="somename2" onclick="exampleFunction(this)">Button2</button>
But if you use jquery, you could do
但是如果你使用jquery，你可以做
$('button').click(function() {
var name = $(this).attr('name');
});
Without the onclickattribute.
没有onclick属性。
回答by codebox
You don't actually need to use thisto achieve this, you can just use the targetproperty of the event object - this technique is also not jquery-specific, its just standard JavaScript:
您实际上并不需要使用this来实现这一点，您可以只使用target事件对象的属性 - 这种技术也不是特定于 jquery 的，它只是标准的 JavaScript：
function handleClick(evt){
var name = evt.target.name;
}
回答by Roko C. Buljan
jsBin demo
jsBin 演示
<button name="somename1">Button1</button>
<button name="somename2">Button2</button>
function example(){
var myName = this.name;
alert(myName);
}
$('button[name^=somename]').click(example);
or simply like: THIS
或者简单地喜欢：这个
$('button[name^=somename]').click(function(){
var myName = this.name;
alert(myName);
});
回答by S3Mi
Use jQuery event binding.
使用 jQuery 事件绑定。
$(document).ready(function(){
$(document).on('click', 'button', example);
});
function example(){
var name = $(this).attr('name');
}
回答by Viktor S.
$(this).attr('name')- this will work only if you are using jquery bind/on/click etc.
$(this).attr('name')- 仅当您使用 jquery bind/on/click 等时，这才有效。
You can modify your HTML like this:
您可以像这样修改 HTML：
<button name="somename1" onclick="example(this)">Button1</button>
and JS code:
和JS代码：
function example(element){
var name = $(element).attr('name');
}
回答by Anthony Grist
If you use jQuery to bind your event handlers then thiswill refer to the element that triggered the event. I'd add a class to all the elements you want to execute that function when clicked, like so:
如果您使用 jQuery 绑定您的事件处理程序，this则将引用触发事件的元素。我会向所有要在单击时执行该函数的元素添加一个类，如下所示：
<button name="somename1" class="example">Button1</button>
<button name="somename2" class="example">Button2</button>
Then use jQuery to bind the event handler to those elements:
然后使用 jQuery 将事件处理程序绑定到这些元素：
$('.example').on('click', example);
