2

for ループを使用して 4 つの四角形を作成しました。これらの四角形のいずれかにカーソルを合わせると、四角形が横に表示されます。しかし、問題は、新しく表示された四角形がマウスアウトで非表示にならないことです。コードの何が問題になっていますか?

JSフィドル

window.onload = function() {
var paper = Raphael(0, 0, 640, 540);    

function aa(h1,h2){
    var showbox = paper.rect(h1+300,h2,100,100);
}
function ab(){
    showbox.hide();
}

for (i = 0; i < 2; i++) {
    for (j = 0; j < 2; j++) {
        (function(i, j) {
            var boxes = paper.rect(0 + (j * 100), 0 + (i * 100), 100, 100).attr({
                fill: '#303030',
                stroke: 'white'
            });
            boxes.node.onmouseover = function() {
                var h1 = boxes.getBBox().x;
                var h2 = boxes.getBBox().y;
                aa(h1,h2);
            };

            boxes.node.onmouseout = function() {
                ab();
            };
        })(i, j);
    }
}
4

1 に答える 1

5

JavaScript スコープの問題があります (さらに、他の 2 つの小さな問題があります。以下を参照してください)。

変数showboxは function 内で定義されますaa。したがって、 onmouseout 関数はそれを見ることができません。Firebug または同等のブラウザを起動すると、一連のshowbox is not definedエラーが表示されます。

ヒント: Raphael を使用するときは、通常、作成したすべてのオブジェクトを含むオブジェクトまたは配列を作成します。アクセスしやすいようにキーを設定し、Raphael 関連のすべての関数の上にスコープを設定して、すべての関数がアクセスできるようにします (以下の jsfiddle の例を参照)。

Raphael オブジェクトにアクセスする方法は、早い段階で決定する必要があるアプリケーション設計の一部です。そうしないと、後でさらに多くのリファクタリングを行う必要があります (そこにあると、痛いです!)。

これは、機能するコードの適合バージョンです。

jsfiddle

編集：各変更を説明するコメントを追加しました。

また、他の 2 つの問題も修正されます。

  • (jsfiddle コードで) Raphael のように、試してattrみるか...display: none;.attr({opacity:0}).hide()
  • ...しかし...しないでください! マウスオーバー イベントは長方形を作成し、マウスアウト イベントは...それらを非表示にします...? 目に見えない四角形のスタックが増え続け、最終的に誰かのブラウザをクラッシュさせる可能性があります。表示してから非表示にするか、作成してから削除します。作成してから非表示にしないでください。

mouseover / mouseout イベント自体は実際には問題ありません。:-)

于 2012-12-14T19:26:30.107 に答える