$(this).attr(ID)无法工作？

Question

以下是一个输入按钮：

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

这是一个输入按钮。当按下该按钮时，应调用traveres函数。在traveres函数内，我使用了console.log($(this).attr("id"))。

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

它没有打印当前输入按钮的ID。

有什么建议吗？我的做法哪里不对了吗？

- lovelyim92

Answer 1

在您的遍历函数中，必须传递一个参数this，该参数将引用当前元素。

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>

- The Process

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'));
});

- Rion Williams

Answer 3

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

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

<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>

- Diego Polido Santana

Answer 4

<div> <input type="button" id="test" value="点击我" onclick="traverse(this);" /> </div>

将this作为自引用传递，并稍后使用相同的引用访问id属性，如下所示。

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

有关更多参考，请访问此链接here

- dutta

Answer 5

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

这将给你当前元素的ID。

- Swamy