Question

有一个输入按钮，如下所示

<div>
    <input type="button" id="test" value="CLICK ME" onclick="traverse();" />
</div>

这是输入按钮。按下后应调用traveres功能。内部遍历功能我有console.log($(this).attr("id"))。

function traverse() {
    console.log(this.id);
}

它不打印当前输入按钮的id。

我做错的任何建议？

Answer 1

您必须在this中传递参数traverse function，该参数将引用current element。

function traverse(elem) {
  console.log(elem.id); //or $(elem).attr('id');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="button" id="test" value="CLICK ME" onclick="traverse(this);" />
</div>

Answer 2

确保使用以下内容传递对实际触发事件的对象的引用：

onclick="traverse(this);"

然后在traverse()函数调用中引用该对象：

function traverse(element) {
    console.log(element.id);
}

由于您正在使用jQuery或者至少提及它，您可以通过使用click()为click事件创建事件侦听器来完成相同的行为，jQuery将知道调用背后的上下文：

$('#test').click(function(){
     console.log($(this).attr('id'));
});

Answer 3

$(this).attr('id');

这将为您提供当前元素的ID。

Answer 4

如果您有许多具有不同ID的输入，则可以触发对一个自定义类的单击：

＆＃13;

$(".click-me").click(function(){
  var id = $(this).attr("id");
  $("#console").append(id + "<br/>");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input type="button" id="test1" value="CLICK ME" class='click-me' />
  <input type="button" id="test2" value="CLICK ME" class='click-me' />
  <input type="button" id="test3" value="CLICK ME" class='click-me' />
  <input type="button" id="test4" value="CLICK ME" class='click-me' />
  <input type="button" id="test5" value="CLICK ME" class='click-me' />
</div>
<div id="console"></div>

＆＃13;

Answer 5

<div> <input type="button" id="test" value="CLICK ME" onclick="traverse(this);" /> </div>

将此作为自我参考＆amp;稍后使用相同的引用访问 id 属性，如下所示。

function traverse(el) { console.log(el.id); }

如需更多参考，请访问此链接here

$（this）.attr（ID）不起作用？

5 个答案: