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".
});

しかし、「heading1」を取得することを期待しているにもかかわらず、id へのアクセスを取得すると、奇妙な番号が表示されます。

これは私が今取り組んでいるコードです。

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

    });
});

によって参照される DOM 要素el.idのプロパティにアクセスする whichを使用しています。可能な限り、HTML ibutes の代わりに DOM を使用することをお勧めします。idelattr

レキシカル スコープ トリックは最も一般的なアプローチですが、これを修正する方法はいくつかあります。

.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 に答える