javascript - 如何使用 $(this) 访问调用 Javascript 函数的按钮的 id？

Question

我是 JavaScript 新手。我在页面上设置了几个按钮，如下所示:

<div id='MID_1_4'>
    <div id="login">logout</div>
    <button type="button" id="logout" onclick="loadXMLDoc2()">Logout</button>
</div>
...

我想提取调用loadXMLDoc2()的按钮的ID。该方法定义如下:

function loadXMLDoc2() {

    var retr = $(this).attr("id");
    document.getElementById("L1_LEFT").innerHTML
        = retr;

}

但是，当我单击按钮时，L1_LEFT 设置为 undefined。我认为 $(this) 的意思是“当前的 HTML 元素”。如果不是按钮那是什么？我如何提取按钮的 id？

Answer 1

this 指的是函数内部的window(全局对象)，this 指的是函数中的element onclick 处理程序。

虽然在 html 中执行 javascript 是不好的方法，但尝试一下:

<div id='MID_1_4'>
    <div id="login">logout</div>
    <button type="button" id="logout" onclick="loadXMLDoc2(this)">Logout</button>
</div>

function loadXMLDoc2(elm) {

    var retr = elm.id;
    document.getElementById("L1_LEFT").innerHTML
    = retr;

}

更好的方法是将 HTML 和 javascript 分开:

<div id='MID_1_4'>
    <div id="login">logout</div>
    <button type="button" id="logout">Logout</button>
</div>

(js文件中的某处)

function loadXMLDoc2(elm) {

    var retr = elm.id;
    document.getElementById("L1_LEFT").innerHTML = retr;

}

$( document ).ready( function(){
//This function is executed after all elements on the page are ready to be manipulated

    $( "#logout" ).bind( "click",
        function(){
        loadXMLDoc2( this );
        }
    );
});