-1

私は SVG 形式のグラフを持っており、マウス ポインターがその上に置かれたときに任意のノードのタイトル プロパティを変更し、ポインターが離れたときに古いタイトルに戻る機能を実装したいと考えていました。これを実装するために、jQuery ライブラリを使用しようとしています。コードは次のようになります。

var oldTitle;
$(document).ready(function() {
    $("g[class=node]").hover(funciton() {
        oldTitle = $(this).prop("title");
        $(this).prop("title", "New Title!");
    }, function() {
        $(this).prop("title", oldTitle);
        }
    );
});

しかし、何らかの理由でコードが機能しておらず、期待される効果が見られません。ここで何がうまくいかないのかについてのアイデアはありますか?

編集：問題が何であるかはわかっていると思いますが、まだ解決策を探しています。そのため、ベクター グラフィックスの HTML コードでは、ノードは次のように表されます。

<g id="node2" class="node"><title>SomeTitle</title>
        <ellipse fill="forestgreen" stroke="forestgreen" cx="243.017" cy="-678" rx="27" ry="18"/>
        <text text-anchor="middle" x="243.017" y="-674.3" font-family="Times New Roman,serif" font-size="14.00">b</text>
</g>

ここで、ホバーアクションでテキストを<title> ... </title>変更し、マウスポインターが離れたときに元に戻すようにします。

これを達成する方法について何か助けはありますか？

PS: $(this).prop("title") は未定義を返すため、ここでのタイトルは node 要素のプロパティではありません....では、それは何ですか? また、どのように変更できますか？

どうもありがとう！

4

3 に答える 3

1

セレクターとしてg[class=node]使用する代わりに。g.nodeg にさらに多くのクラスが含まれていると、コードが失敗する可能性があります。

var oldTitle;

$(document).ready(function() {
    $("g.node").hover(function() {
        oldTitle = $(this).find("title").text();

        $(this).find("title").text( "New Title!");
    }, function() {
        $(this).find("title").text(oldTitle);
        }
    );
});​
于 2012-09-28T12:45:20.597 に答える
1

これはうまくいくかもしれません 

var oldTitle;
    $(document).ready(function() {
        $("g[class=node]").hover(function() {
            oldTitle = $(this).attr("title");
            $(this).attr("title", "New Title!");
        }, function() {
            $(this).attr("title", oldTitle);
            }
        );
    });

このコードは、そのようなものがある場合に機能します

 <g id="node2" class="node" title="SomeTitle" >
            <ellipse fill="forestgreen" stroke="forestgreen" cx="243.017" cy="-678" rx="27" ry="18"/>
            <text text-anchor="middle" x="243.017" y="-674.3" font-family="Times New Roman,serif" font-size="14.00">b</text>
    </g>

しかし、あなたは使う<title></title> よりも使っています

var oldTitle;
        $(document).ready(function() {
            $("g[class=node]").hover(function() {
                oldTitle = $(this).find("title").text();
                $(this).find("title").html("New Title!");
            }, function() {
                $(this).find("title").html(oldTitle);
                }
            );
        });
于 2012-09-28T12:28:54.713 に答える
1

それが実際のコードである場合、スペルチェックが必要です

$("g[class=node]").hover(funciton() {  <--spelling error here

function のスペルが間違っています。 and に注意しiてtください。

于 2012-09-28T12:29:01.423 に答える