0

以下のコードはChromeとIE（8）で機能しますが、Firefoxは「オーバーレイが定義されていません」と言っています。this.overlayまたは[this.overlay]の使用も機能しません。違いの原因とFirefoxでの修正方法は何ですか？

コード：

var ol = {
overlay: document.getElementById("overlay"),
build: function(e){
    //todo: build elements dynamically
},
open: function(){
    overlay.style.display = "block";
    centerVertically();
    ol.build();
},
close: function(){
    overlay.style.display = "none";
}
};

前もって感謝します。

編集： ソリューションはスタンドアロン（JSfiddle）で動作しますが、プロジェクトでコードを使用すると失敗します。それはまったく意味がありません。このスクリーンショットマッシュアップを参照してください： 画像リンク

編集＃2：

スクリプトタグをDOMの下部に移動すると、すべてが修正されました。なぜそんなことを考えなかったのかわかりません。それはおそらく最初からの問題でした-ChromeとIEは、クロージャーの問題があっても私の愚かさをうまく処理します。

しかし、私はあなたの返事を受け取ったので、今ではより安全なコードを書き、オブジェクト内のオブジェクトのプロパティに適切にアクセスする方法を知っています。ありがとう！

4

2 に答える 2

4

メソッドを参照しているときと同じように、「オーバーレイ」を参照しているときにオブジェクトスコープを追加する必要があります。

したがって、関数で「ol.overlay.style.display」を実行するだけで問題ありません。

var ol = {
    overlay: document.getElementById("overlay"),
    build: function(e){
        //todo: build elements dynamically
    },
    open: function(){
        ol.overlay.style.display = "block";
        centerVertically();
        ol.build();
   },
   close: function(){
        ol.overlay.style.display = "none";
   }
};
ol.open();

現在のように、「ol」オブジェクトスコープ外のグローバルJS変数を探しています。

編集@MattBallが以下のコメントで言及しているように（私がこれに追加するつもりだったもの）。DOMの読み込みが完了したときにのみ、「overlay」要素を取得するようにする必要があります。

document.readyパターンを使用してこれを行うことも、「ol」関数内で遅延読み込みパターンを実行することもできます。document.readyパターンを使用し、「ol」オブジェクトを変更してオーバーレイのデフォルトをnullにし、ドキュメントの準備ができたときに定義する（または、ドキュメントの準備ができたときに呼び出すinitタイプのメソッドに入れる）ことをお勧めします。

于 2012-07-19T13:20:47.973 に答える
1

これは、ページにIDを持つ要素があると仮定するとoverlay、すべてのブラウザで問題なく機能するはずです。

var ol = {
    overlay: document.getElementById("overlay"),
    build: function (e) {
        //todo: build elements dynamically
    },
    open: function () {
        this.overlay.style.display = "block";
        this.centerVertically();
        this.build();
    },
    close: function () {
        this.overlay.style.display = "none";
    },
    centerVertically: function () {
        // snip
    }
};

次のような関数を呼び出す限り、次のようになります。

ol.open();
// or
ol.close();
// or
ol.build();

そしてこれが好きではありません（これはthisさまざまな関数で参照されませんol）：

var openFn = ol.open();
openFn();
// etc.
于 2012-07-19T13:14:59.143 に答える