0

誰かが助けてくれることを願っています。

私はsvgファイルから膨大な量のパスを取得しました（ここではいくつかのみを示しています）.これを配列に保存して、Raphael紙に動的に作成します.

var paths = "M539.99,181v95.141h-0.12L509.521,181H539.99zdivideM539.99,276.511v84.85h-30.41L539.99,276.511zdivideM539.99,85.021V181h-30.47L539.99,85.021"; // string with paths from svg file. Much much bigger in real code
var pathsArray = paths.split("divide"); // putting all paths in an array

forループ内のonmouseover関数で属性をパスに割り当てようとするまで、すべてが機能します。何も起こりません。また、コンソールにエラー メッセージは表示されません。

var currentPath = window['section' + i];
currentPath.node.onmouseover = function() {  
    this.style.cursor = 'pointer'; 
    currentPath.attr("fill", "#ccc"); // <-- THIS PART DOESNT WORK
}

私もこの方法で試しました：

window['section' + i].attr("fill", "#ccc");

エラーメッセージが表示されます： TypeError: 'undefined' is not an object (evaluating 'window['section' + i].attr')

完全なコードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="raphael.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>

<script type="text/javascript">

var paths = "M539.99,181v95.141h-0.12L509.521,181H539.99zdivideM539.99,276.511v84.85h-30.41L539.99,276.511zdivideM539.99,85.021V181h-30.47L539.99,85.021"; // string with paths from svg file. Much much bigger in real code
var pathsArray = paths.split("divide"); // putting all paths in an array 

var paper = Raphael(10, 50, 1000, 1000);

for (var i=0;i<pathsArray.length;i++)
{ 

var currentPath = window['section' + i];

currentPath = paper.path(pathsArray[i]);
currentPath.attr("fill", "#f00");
currentPath.attr("stroke", "#fff");
currentPath.node.onmouseover = function() {  
    this.style.cursor = 'pointer'; 
    currentPath.attr("fill", "#ccc"); // <-- THIS PART DOESNT WORK
}

}

</script>

</body>
</html>
4

1 に答える 1

0

このキーワードを使用してみてください。ドキュメントによると、マウスオーバーイベントが組み込まれています。したがって、以下も機能するはずです。

currentPath.mouseover(function() {  
    this.node.style.cursor = 'pointer';  // using 'node' property to get access to DOM element
    this.attr("fill", "#ccc"); // 'this' should refer to Raphael element
});

currentPath はハンドラー関数内にありましたが、常にループ内の最後の 'currentPath' の値を取得していました。

于 2012-11-10T11:54:55.640 に答える