如何使用调用函数的元素的“this”引用？

Question

例如，我想要一个被许多元素使用的函数来获取调用元素的属性。

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>

因此，如果名为“somename1”的按钮调用该函数，变量“name”将被分配给“somename1”，因此如果“somename2”调用它，它将被分配给“somename2”

Answer 1

使用这个：

function exampleFunction(exampleElement) {
    var name = exampleElement.name;
}

<button name="somename1" onclick="exampleFunction(this)">Button1</button>
<button name="somename2" onclick="exampleFunction(this)">Button2</button>

但是如果你使用jquery，你可以这样做

$('button').click(function() {
  var name = $(this).attr('name');
});

没有

onclick

属性。

Answer 2

你实际上并不需要使用

this

来实现这一点，你可以只使用事件对象的

target

属性 - 这种技术也不是 jquery 特定的，它只是标准的 JavaScript：

function handleClick(evt){
    var name = evt.target.name;
}

Answer 3

jsBin 演示

<button name="somename1">Button1</button>
<button name="somename2">Button2</button>

function example(){
   var myName = this.name;
   alert(myName);
}

$('button[name^=somename]').click(example);

---

或者只是喜欢：这个

$('button[name^=somename]').click(function(){
   var myName = this.name;
   alert(myName);
});

Answer 4

$(this).attr('name')

- 仅当您使用 jquery 绑定/打开/单击等时这才有效。

您可以像这样修改 HTML：

<button name="somename1" onclick="example(this)">Button1</button>

和JS代码：

function example(element){
    var name = $(element).attr('name');
}

Answer 5

如果您使用 jQuery 绑定事件处理程序，则

this

将引用触发事件的元素。我会向您想要在单击时执行该功能的所有元素添加一个类，如下所示：

<button name="somename1" class="example">Button1</button>
<button name="somename2" class="example">Button2</button>

然后使用 jQuery 将事件处理程序绑定到这些元素：

$('.example').on('click', example);

Answer 6

使用 jQuery 事件绑定。

$(document).ready(function(){
    $(document).on('click', 'button', example);
});
function example(){
    var name = $(this).attr('name');
}

Answer 7

我相信一些更常见的方法仍然有效，但似乎它们已经被集成，不需要设置参数名称。 现在这会在我的浏览器上引发错误

function handleClick(event){
  let nameContainer = document.getElementById("nameContainer");
  nameContainer.innerHTML = event.target.name;
}

<button onclick="handleClick()" name="special name">Show Name</button>
<div id="nameContainer">
</div>

但这似乎有效。 所以看来你不再需要设置这个参数了。 我相信这种方式已被弃用，尽管我目前不知道替代方案

function handleClick(){
  let nameContainer = document.getElementById("nameContainer");
  nameContainer.innerHTML = event.target.name;
}

<button onclick="handleClick()" name="special name">Show Name</button>
<div id="nameContainer">
</div>

Answer 8

纯Javascript只需使用：

function funExample(var,var..){
  var example = this.event.currentTarget;
}

“event.currentTarget”带来所有元素的属性，在本例中为按钮 例如，您可以获得innerHTML。

function funExample(var,var..){
      var example = this.event.currentTarget;
      var texto = example.innerHTML
}