1


0

JavascriptクラスとjQueryイベントリスナー

各セクション(この例では#oneと#two)内のオブジェクトにイベントリスナーをアタッチする必要があるクラスを書いていますが、jQueryイベントリスナーを設定するためにクラスから変数を渡す問題があります。

    function myClass(id) {

        this.id = id;

        $(document).ready(function(){

            $(this.id + ' .filter').click(function(){ alert("You clicked a filter"); });

        });

    }

    one     = new myClass('#one');
    two     = new myClass('#two');
    I am link one



    I am link two
  1. 残念ながら、可変スコープは私と一致しません。 `this.id`はできません `$(document).ready()`内からアクセスできるため、イベントリスナーは起動しません。 どうやってアクセスできますか?

3 回答


1


これは、「this」が現在の関数が呼び出されたオブジェクトを参照するキーワードだからです。 jQueryイベントハンドラーでは、このオブジェクトはイベントハンドラーが登録されたDOM要素です(つまり、 この場合はドキュメントを作成します。)別の変数名を使用してオブジェクトを保存します。

    function myClass(id) {
            var me = this;
            this.id = id;

            $(document).ready(function(){
                    $(me.id + ' .filter').click(function(){ alert("You clicked a filter"); });
            });
    }
    one             = new myClass('#one');
    two             = new myClass('#two');


0


内部関数内で使用するには、「this」の「local」コピーを作成する必要があります。

function myClass(id) {
    this.id = id;
    var that = this;
    $(document).ready(function(){

        $(that.id + ' .filter').click(function(){ alert("You clicked a filter"); });

    });
}


0


この場合、別の変数で宣言する必要はありません。document.ready`関数で `id`を this.id`に置き換えるだけです:

function myClass(id) {
    $(document).ready(function(){
        $(id + ' .filter').click(function(){ alert("You clicked a filter"); });
    });
}

ただし、何らかの処理を行った場合は、常に別の変数で「this」のエイリアスを作成できます。

function myClass(id) {
    var base = this;
    base.id = id;
    // Other items set on base.value

    $(document).ready(function(){

        $(base.id + ' .filter').click(function(){ alert("You clicked a filter"); });

    });

}