-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") 返回 undefined，所以这里的 title 不是节点元素的属性......那么，它是什么？以及如何改变？

非常感谢！

4

3 回答 3

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

你拼错了函数，注意iand t。

于 2012-09-28T12:29:01.423 回答
1

而不是使用g[class=node]useg.node作为选择器。如果 g 包含更多类，您的代码可能会失败。

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