14

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

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”

4

7 回答 7

25

使用这个：

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属性。

于 2012-09-17T09:28:15.777 回答
3

您实际上不需要使用this来实现这一点，您可以只使用target事件对象的属性 - 这种技术也不是 jquery 特定的，它只是标准的 JavaScript：

function handleClick(evt){
    var name = evt.target.name;
}
于 2012-09-17T09:27:28.310 回答
2

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);
});
于 2012-09-17T09:30:34.237 回答
0

$(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');
}
于 2012-09-17T09:27:40.913 回答
0

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

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

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

$('.example').on('click', example);
于 2012-09-17T09:27:53.343 回答
0

使用 jQuery 事件绑定。

$(document).ready(function(){
    $(document).on('click', 'button', example);
});
function example(){
    var name = $(this).attr('name');
}
于 2012-09-17T09:29:35.063 回答
0

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

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>

于 2021-03-31T09:44:16.297 回答