0

我正在尝试与 Raphael 合作一些 SVG 的东西，并尝试，好吧，以我有限的知识，构建一些漂亮的东西；）我有 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 之前引用“工具”变量，以防它与全局/局部变量（疯狂猜测）相关，但这也不起作用。将 svg 元素的 id 更改为“tool”到“tool2”也不起作用。

还能是什么？我的（可能很明显）盲点在哪里？

4

3 回答 3

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 回答
0

回调不应该在这里声明为参数吗？

function getScripts(callback)
{ 
    $.when($.getScript(scripts[raphael]).then(callback) 
}
于 2012-07-11T20:58:08.367 回答
0

该问题与变量范围无关。您只需要在内联事件处理程序中的函数名称后面加上括号。将最后一行改写为：

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

你会启动并运行。

然而，由于各种原因，内联事件处理程序不受欢迎。正如quirksmode所说：“尽管内联事件注册模型是古老而可靠的，但它有一个严重的缺点。它要求您在不属于它的 XHTML 结构层中编写 JavaScript 行为代码。”

一种更简洁的方法是将标记和脚本分开，例如：

<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 回答