7

私が持っている内外のJSファイル

$(document).ready(function() {
    var example = function(){ alert("hello") }
});

HTMLからその関数を呼び出したいのですが、どうすればいいですか?

<img src="..." ondblclick="example()" />

nb jquery dblclick()は知っていますが、上記を正しく行う方法に興味があります。

4

6 に答える 6

16 
$(document).ready(function() {
    window.example = function() {
        alert("hello")
    }
});

または、可能であれば外部で定義してください。ドキュメント内で定義する必要があるようには見えません。

于 2012-08-19T16:24:00.763 に答える
3

ここでの他の解決策は機能しますが、プロジェクトの構造上、HTML からイベント処理コードを削除し、javascript を介してイベントを完全にフックする (HTML/JS を分離する) のが最善の解決策です。プロジェクトにはすでに jQuery があるため、これは非常に簡単です。そのために必要なことは、画像にある種の ID を付けることだけです。

<img id="example" src="..." />

次に、次のように ready() 関数でイベントコードをフックするだけです

$(document).ready(function() {
    $("#example").dblclick(function() {
        alert("Hello");
    });
});

これには次の利点があります。

  1. グローバル変数を作成しないため、グローバル名前空間の汚染が減少します。
  2. HTML を JavaScript から分離し、動作を制御するすべてのコードを 1 つのコンパクトな場所に保持し、通常は良いことです
  3. イベント リスナーを使用すると、 を使用するよりもスケーラブルです。ondblclick- コードの複数の異なる部分が同じオブジェクトで競合しないイベント ハンドラーを使用できるようにする
于 2012-08-19T16:49:58.310 に答える
3

HTML からアクセスする場合、関数はグローバル (実際には window オブジェクトのプロパティ) である必要があります。ただし、ベスト プラクティスは、代わりに名前空間を使用して、グローバル変数と関数を避けることです。

// let's publish our namespace to window object
if (!window.myNamespace){
    // creating an empty global object
    var myNamespace = {};
}

// and add our function to it
$(document).ready(function() {
    myNamespace.example = function(){ alert("hello"); }
});

次のように HTML で使用できます。

<img src="..." ondblclick="myNamespace.example()" />
于 2012-08-19T16:51:36.513 に答える
3

最良のオプションは、単に関数を外部で定義することdocument.ready()です。$(document).ready()イベント内で関数を定義する必要はありません。関数内で関数を呼び出す場合$(document).ready()、ドキュメントの準備が整っていることが保証されます。

ただし、次のように、グローバル ウィンドウ オブジェクトで関数を定義することもできます。

$(document).ready(function() {
    window.example = function(){ alert("hello") }
});
于 2012-08-19T16:24:16.383 に答える
1

@Esailijaは正しく回答しましたが、そのままにしておきたい場合は、削除varしてグローバルにします。

var example;
$(document).ready(function() {
  example = function() {
    alert("hello")
  }
});

var変数/関数/オブジェクトを配置しない場合、グローバルになります。あなたを使用して、関数var内でそのコンテキストを設定していました。document.ready

于 2012-08-19T16:31:19.627 に答える
1

関数宣言を DOM 対応ハンドラーの外に移動することもできます。

function example(){ alert("hello") }

$(document).ready(function() {
    // code
});

しかし、より良い解決策は、JavaScript を .js ファイルに保持し、インライン イベント ハンドラーを避けることです。要素に id を付けてフェッチします。

<img src="..." id="imgid" />

$(document).ready(function() {
    document.getElementById("imgid").ondblclick = function(){ alert("hello") }
});
于 2012-08-19T16:43:16.543 に答える