获取输入标记的ID属性时获取奇怪的数字

时间:2013-09-14 04:25:40

标签: javascript jquery

我想获得输入标记的id属性值。

<input type="text" id="heading1" class="alert-heading" value="aaa" />

为此,我写了这段代码。

var alertHeading = $(".alert-heading");

alertHeading.on('blur', function(){
    var headingId = $(this).attr("id");
    console.log(headingId); // outputs 2943. I'm expecting "heading1".
});

但是,当我获得id的访问权限时,我得到一个奇怪的数字,虽然我期望得到一个“heading1”。

这是我现在正在处理的代码。

var alertHeading = $(".alert-heading");

alertHeading.on('blur', function(){

    var key = alertMode.val();

    chrome.runtime.getBackgroundPage(function(backgroundPage) {

        var background = backgroundPage.background;

        var alertObject = background.getStorage(key);

        //(EDITED)Oh I think $(this)here no longer points to the input element!!
        var headingId = $(this).attr("id");

        console.log(headingId); // outputs 2943. I'm expecting "heading1".

    });

})

请帮我解决这个问题。 提前谢谢!

2 个答案:

答案 0 :(得分:3)

在ECMAScript术语中解释这一点,每次创建新enters a function控件Execution Context。每个执行上下文都有自己的thisBinding,因此您需要存储对外部上下文的this引用的引用,以便您可以通过lexical scope访问它。

alertHeading.on('blur', function(){
    //[...]
    var el = this; //copy the `this` reference to a variable
    chrome.runtime.getBackgroundPage(function(backgroundPage) {
        // [...]
        var headingId = el.id; //access outer scope's this

    });
});

我正在使用el.id访问id引用的DOM元素的el属性。最好随时使用DOM而不是HTML attr ibutes。


词法范围技巧是最常用的方法,但有几种方法可以解决这个问题。

在ES5中,还可以.bind()函数对象的this引用:

alertHeading.on('blur', function(){
    chrome.runtime.getBackgroundPage(function(backgroundPage) {
        // [...]
        var headingId = this.id; //2. Now it has the same this as outer scope

    }.bind(this)); //1. The onblur's `this` is bound to the bgpage callback
});

答案 1 :(得分:2)

您需要将this保存在闭包变量中:

alertHeading.on('blur', function(){

    var key = alertMode.val();
    var that = this;

    chrome.runtime.getBackgroundPage(function(backgroundPage) {
        var background = backgroundPage.background;
        var alertObject = background.getStorage(key);
        var headingId = that.id;
        console.log(headingId);
    });
});