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

$(this).attr('name') - 只有在使用jquery bind / on / click等时才会有效。

您可以像这样修改HTML：

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

和JS代码：

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

Answer 4

如果使用jQuery绑定事件处理程序，则this将引用触发事件的元素。我会在单击时为要执行该功能的所有元素添加一个类，如下所示：

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

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

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

Answer 5

使用jQuery事件绑定。

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

Answer 6

jsBin demo

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

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

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

或只是喜欢： THIS

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

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>

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

7 个答案:

jsBin demo