0

私はいくつかのSVGのもののためにRaphaelと協力しようとしていて、私の限られた知識で、美しいものを構築しようとしました;）私は3つのファイルを持っています：1x htmlファイルと2xjsファイルhtmlファイル：onload関数（+ヘッダー、体ともの）

window.onload=function()
{
    init();
}

js File1：init関数とjsファイル（Raphaelなど）をロードする関数、およびファイルがロードされた後に続行するコールバックがあります

function init()
{
    getScripts(initTool)
}

function getScripts(callback)
{ 
    $.when($.getScript(scripts[raphael]).then(callback) 
} 

function initTool()
{
    $('body').append("<div id='tool'></div>");
    tool=Raphael("tool",5000,5000);
    $('body').append("<a href='javascript:void(0)' onclick='newElement'>New element</a>")
}

js File2：ここに関数newElementがあり、Rapahelによって作成されたsvg要素への単一のパスを（この例では）追加する必要があります

function newElement()
{
    tool.path("M10,20L30,40");
}

残念ながら、パスが表示されず、理由がわかりません。グローバル/ローカル変数（ワイルド推測）に関連する場合に備えて、onloadの前に「tool」変数を参照しようとしましたが、これも機能しません。svg要素のIDを「tool」から「tool2」に変更しても機能しません。

他に何ができるでしょうか？私の（おそらく明白な）死角はどこにありますか？

4

3 に答える 3

0

この問題は、変数のスコープとは関係ありません。インライン イベント ハンドラの関数名の後に括弧が必要です。最後の行を次のように書き換えます。

$('body').append("<a href='javascript:void(0)' onclick="newElement()">New element</a>")

そして、あなたは稼働しています。

ただし、インライン イベント ハンドラは、さまざまな理由から嫌われています。quirksmodeは次のように述べています。

これを行うためのよりクリーンな方法は、マークアップとスクリプトを分離することです。次に例を示します。

<div id='tool'></div>
<a id="mylink" href='#'>New element</a>

<script>
var tool = Raphael("tool",500,500);

$('#mylink').on("click", function() {
    tool.path("M10,20L30,40");
});
</script>

このコードの動作については、このjsfiddleを参照してください。

最後に、役立つヒントとして、特に jquery を使用している場合は、ウィンドウの読み込みではなく、ドキュメントの準備ができた状態でコードを実行することをお勧めします。ドキュメントの準備は、DOM が最初に構築されたときに行われます。ウィンドウの読み込みは、すべてのアセットが完全に読み込まれるまで待機します。これには時間がかかる場合があり、通常は必要ありません。これは長い間、ベスト プラクティスと見なされてきました。

于 2013-01-24T02:27:01.967 に答える
0

正直なところ、私はかなりの量の JavaScript を作成しましたが、まだ変数のスコープを完全には理解していません。ただし、関数を呼び出すときは、括弧を使用して実行する必要があることを示す必要があります (括弧なしで関数を参照する場合が数回ありますが、それはこの回答の範囲を超えています)。

そう...

$('body').append("<a href='javascript:void(0)' onclick='newElement()'>New element</a>")

しかし、これだけでは機能しません。次のように関数を宣言する必要があります。

var newElement = function() {
    tool.path("M10,20L30,40");
}

ここに実用的なソリューションがあります: http://jsfiddle.net/vAjG2/

（おそらく、誰かがこれらの変更が必要な理由を詳しく説明できますが、私自身は把握していません）。

于 2012-07-11T23:37:34.610 に答える