1

私は基本的に、手続き型の js アプローチから離れようとしているので、オブジェクトをより多く使用しようとしています。全体的なオブジェクト内にオブジェクトを設定して、セレクターをキャッシュし、変数などを設定しましたが、問題があるようです。現在、このコードを実行すると、.length と .children の両方が未定義であることを示す 2 つのエラーが発生します。jqueryメソッドを使用できるように、これらを設定する適切な方法を誰かが説明できますか?

JS

var bop = {

        els: {
           // cache selectors ...
            grid: $( '#grid' ),
            box: this.grid.children(),
            box_l: this.box.length,
            start_btn: $( '#start' ),
            counter: $( '#counter' ),
            sequence: 5            
        }
}
4

3 に答える 3

5

thisオブジェクトリテラルで構築している構築中のオブジェクトを参照すると予想される場合は、それが問題です。JavaScript はそのようには機能しません。

あなたはこれを行うことができます：

var bop = {
 els: {
   grid: $('#grid'),
   // ...
 }
};

bop.els.box = box.els.grid.children();
// etc

このthisリファレンスはすべて関数呼び出しに関するものであり、実際にはオブジェクトとは何の関係もありません。または、C++/C#/Java のバックグラウンドを持っている場合に考えられるほどではありません。

于 2012-06-11T13:00:08.853 に答える
2

リテラル オブジェクト内で使用する場合this、作成中のオブジェクトを参照するのではなく、リテラル オブジェクト外のコードと同じです。

于 2012-06-11T13:01:34.363 に答える
1

どうしても使いたい場合thisは、キャッシュオブジェクトを次のように変更してください

els: {
           // cache selectors ...
            grid: $( '#grid' ),
            box: function(){
                   return this.grid.children()
            },
            box_l: function(){
                  return this.box().length
            },
            start_btn: $( '#start' ),
            counter: $( '#counter' ),
            sequence: 5            
        }

それ以外の場合は、およびプロパティ$( '#grid' )を使用するときに必ず参照してください。boxbox_1

余談ですが、このthisフィドルは、思ったように機能しない理由を理解するのに役立ちます。乾杯。

于 2012-06-11T13:03:43.673 に答える