Question

以下操作正常，并显示按钮的ID：

<input class="edit" type="button" value="Edit" id="button1">

脚本

$(".edit").click (function(){
    var buttonID = $(this).attr('id');
    alert(buttonID);
}

但这不包含未定义的ID buttonID：

<div id="button1" onclick="pickedID()">Edit</div>

脚本

function pickedID() {
    var buttonID = $(this).attr('id');
    alert(buttonID);
}

这是为什么，有什么方法可以像我想的那样获取Div ID？

Answer 1

调用this时必须将function添加到<div id="button1" onclick="pickedID(this)">Edit</div>

然后我们可以按以下方式使用它：

function pickedID(obj) {
    var buttonID = $(obj).attr('id');
    alert(buttonID);
}

因此，在这种情况下，obj中的function pickedID(obj)是指this中的onclick="pickedID(this)"

演示

function pickedID(obj) {
    var buttonID = $(obj).attr('id');
    alert(buttonID);
}

$(".edit").click(function(){
    var buttonID = $(this).attr('id');
    alert(buttonID);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="edit" type="button" value="Edit" id="button1">


<div id="button2" onclick="pickedID(this)">Edit</div>

Answer 2

我建议您不要使用内联onclick处理程序。使用jQuery分配事件处理程序要好得多。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="button1">Edit</div>

Answer 3

使用onclick不能使您直接使用this访问属性。

您可以使用event，它将为您处理鼠标事件，然后可以检索ID。

在您的情况下：

function pickedID() {
    var buttonID = event.srcElement.id;
    console.log(buttonID);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="button1" onclick="pickedID()">Edit</div>

或者您可以将ID直接传递给函数：

function pickedID(id) {
    console.log(id);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="button1" onclick="pickedID(this.id)" data-id="2">Edit</div>

jQuery-单击获得DIV元素的ID

3 个答案: