1

我想获取输入标签的 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".

    });

})

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

4

2 回答 2

3

用 ECMAScript 术语解释这一点，每次控制进入一个函数时，都会创建一个新的执行上下文。每个执行上下文都有自己的thisBinding，因此您需要存储对外部上下文引用的this引用，以便您可以通过词法范围访问它。

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.idwhich 访问.id引用的 DOM 元素的属性el。attr尽可能使用 DOM 而不是 HTML ibute是一种很好的做法。

词法作用域技巧是最常见的方法，但有几种方法可以解决这个问题。

.bind()在 ES5 中，也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
});
于 2013-09-14T04:31:48.550 回答
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);
    });
});
于 2013-09-14T04:30:32.510 回答