3

目前我有一个用 raphael 创建的竞技场地图，地图上的每个 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 之前，工具提示不会被“实例化”。

这可能是解决方案，但我将详细说明一些技巧，这些技巧可能有助于将来解决此类问题。

我看到您正在使用警报（'test'）。这将帮助您确定是否正在访问代码，但它对于确定执行顺序并不是那么好（这似乎是这里的问题）。

而是使用两种方法之一来“调试”JavaScript。它是一个非常强大的运行时工具。方法如下：

  1. 以编程方式：添加 JS 关键字调试器；这将设置一个断点并在执行期间停止您的代码。

    el.mouseover(function() { debugger; addTip(this.node, tipText); console.log(node); this.toFront(); this.attr({ cursor: 'pointer', fill: '#990000', });

这可能有助于您解决问题，因为您会看到此代码仅在第一次鼠标悬停后触发。

提示：在浏览器中打开单步调试器之前，调试器不会在断点处“停止”。为此，我推荐 Chrome 中的开发工具。您所做的就是右键单击页面并选择“检查元素”。这将打开一个控制台，提供按钮播放、跨步、跨步。一开始这可能是陌生的，但逐步调试 JavaScript 是成为高级 JS 开发人员必须具备的最重要的工具。这是非常重要的。:) 刷新页面，将鼠标悬停在您的元素上，您应该会看到它在调试器代码行处停止执行。

“2。” 使用开发工具设置断点而不是“调试器；”。这更灵活，因为断点是在浏览器运行时设置的，而不是物理嵌入代码中。

FireBug for Firefox 也很不错。但这需要您进行一些调查。

Step-Debugging对你有好处，试试吧！希望这可以帮助。祝一切顺利！纳什

于 2012-06-11T16:29:48.867 回答