3

現在、私はラファエルで作成されたアリーナ マップを持っています。マップ上の各 svg 要素には、カーソルを合わせるとツールチップが表示されます。ツールチップは、svg 要素の最初のホバーでは表示されませんが、ユーザーが svg 要素を再度入力すると表示されます。

私のaddTip "mouseeneter"関数と関係があると思いますが、JSを理解するのはまだ初めてなので、よくわかりません。これは、ホバー時にツールチップをsvg要素に追加するために使用しているコードです。使用しているコードは、このstackoverflowフォーラムの質問と作成したjsfiddleに基づいていますリンク

    var tip = $("#tip").hide();
    var tipText = "Tip the Canoe.";
    var over = false;
    function addTip(node, txt) 
    {
        $(node).mouseenter(function(){
            tipText = txt;
            tip.fadeIn();
            over = true;
        })
       .mouseleave(function(){
            tip.fadeOut();
            over = false;
        });
    }

    for (var i = 0, len = rsrGroups.length; i < len; i++) {
        var el = rsrGroups[i];
        el.mouseover(function() {
            addTip(this.node, tipText);
            console.log(node);
            this.toFront();
            this.attr({
                cursor: 'pointer',
                fill: '#990000',
            });
            //alert('test');
        });

        el.mousemove(function(e){
            if (over){
                tip.css("left", e.clientX+20).css("top", e.clientY+20);
                tip.text(tipText);
            }
        });
        el.mouseout(function() {
            this.attr({
                fill: '#003366'
            });
        });
        el.click(function() {
            this.attr({
                fill: 'green'
            });
        });

    }
4

2 に答える 2

2

マウスオーバーが発生するまでツールチップを追加するのを待っています。その前にツールチップを追加してください。

前：

 for (var i = 0, len = rsrGroups.length; i < len; i++) {
    var el = rsrGroups[i];
    el.mouseover(function() {
        addTip(this.node, tipText);

後：

 function addTip(node, txt) {
    node.mouseover(function(){
        tipText = txt;
        tip.fadeIn();
        over = true;
        }).mouseout(function(){
        tip.fadeOut();
        over = false;
    });
}

 for (var i = 0, len = rsrGroups.length; i < len; i++) {
    var el = rsrGroups[i];
    addTip(el, tipText);
    el.mouseover(function() {
于 2012-06-11T16:11:20.687 に答える
0

私はアンドリューに同意します。ツールチップは、最初の el.mouseover まで「インスタンス化」されていません。

これはおそらく解決策ですが、今後このような問題を解決するのに役立つヒントをいくつか詳しく説明します。

alert('test') を使用しているようです。これは、コードに到達しているかどうかを判断するのに役立ちますが、実行順序を判断するのにはあまり適していません (これが問題のようです)。

代わりに、JavaScript を「デバッグ」する 2 つの方法のいずれかを使用してください。これは非常に強力なランタイム ツールです。方法は次のとおりです。

  1. プログラムで: JS キーワード デバッガーを追加します。これにより、ブレークポイントが設定され、実行中にコードが停止します。

    el.mouseover(function() { debugger; addTip(this.node, tipText); console.log(node); this.toFront(); this.attr({ カーソル: 'ポインタ', 塗りつぶし: '#990000', });

このコードは最初のマウスオーバーの後にのみ起動されることがわかるため、これは問題の解決に役立つ可能性があります。

ヒント: ブラウザーでステップ デバッガーが開かれるまで、デバッガーはブレークポイントで「停止」しません。このために、Chrome の Dev Tools をお勧めします。ページを右クリックして「要素の検査」を選択するだけです。これにより、ボタン再生、ステップオーバー、ステップインを提供するコンソールが開きます。これは最初は異質かもしれませんが、JavaScript のステップ デバッグは、高度な JS 開発者になるための最も重要なツールです。それは非常に重要です。:) ページを更新し、要素にマウスを合わせると、コードのデバッガー行で実行が停止することがわかります。

「2.」Dev Tools を使用して、'debugger;' の代わりにブレークポイントを設定します。これは、ブレークポイントが実行時にブラウザで設定され、コードに物理的に埋め込まれていないため、より柔軟です。

Firefox 用の FireBug も非常に優れています。しかし、それにはあなたの側で少し調査が必要です。

ステップデバッグはあなたにとって良いことです。試してみてください! お役に立てれば。ではごきげんよう！ナッシュ

于 2012-06-11T16:29:48.867 に答える