dot的链接或者tooltip出现黑窗口解决

问题发现：原来与几年前写的js代码冲突

<script type="text/javascript">
    $(function () {
        var x = 0;
        var y = 100;
        var newtitle = '';
        $('a').mouseover(function (e) {
            if(this.title != ""){
                newtitle = this.title;
                this.title = '';
                $('body').append('<div id="mytitle" >' + newtitle + '</div>');
                {#alert(e.pageX+','+ e.pageY+"----"+x+','+y);#}


                $('#mytitle').css({
                    'left': (e.pageX + x + 'px'),
                    'top': (e.pageY + y - 80 + 'px'),
                    'position': 'absolute',
                    'color': '#ffffff',
                    'max-width': '50%',
                    'font-size': '18px',
                    'padding': '4px',
                    'background': 'rgba(40, 40, 40, 0.8)',
                    'border': 'solid 1px #e9f7f6',
                    'border-radius': '5px',
                }).show();

                $(this).mouseout(function () {
                    this.title = newtitle;
                    $('#mytitle').remove();
                })
            }
        })
    });
</script>

 

问题很明显出在 undefined 的处理上。代码本身逻辑是：当鼠标悬停在带有 title 属性的 <a> 标签上时，创建一个自定义的提示框，并移除原有的 title，鼠标移出时恢复 title 并移除提示框。

问题在于，当某些 <a> 标签没有 title 属性时，this.title 的值会是空字符串 "" ，而不是 undefined。代码中的 if(this.title != "") 会进入条件语句，导致：

1. this.title = '';: 尝试将 title 属性设置为空，这没有问题。
2. $('body').append('<div id="mytitle" >' + newtitle + '</div>');: 关键问题在这里，因为 newtitle 在之前没有被赋值，所以它的初始值是 undefined，导致你创建的提示框文本内容就是 undefined。

解决方法

我们需要确保 newtitle 变量的值是正确的，只有当 <a> 标签有 title 属性时才进行赋值。修改后的代码如下：

<script type="text/javascript">
    $(function () {
        var x = 0;
        var y = 100;
        var newtitle = '';

        $('a').mouseover(function (e) {
            // 检查 title 属性是否存在并且不为空
            if (this.title && this.title.trim() !== "") {
                newtitle = this.title; // 将 title 属性的值赋给 newtitle
                this.title = ''; // 清空 a 标签的 title 属性

                $('body').append('<div id="mytitle" >' + newtitle + '</div>');

                $('#mytitle').css({
                    'left': (e.pageX + x + 'px'),
                    'top': (e.pageY + y - 80 + 'px'),
                    'position': 'absolute',
                    'color': '#ffffff',
                    'max-width': '50%',
                    'font-size': '18px',
                    'padding': '4px',
                    'background': 'rgba(40, 40, 40, 0.8)',
                    'border': 'solid 1px #e9f7f6',
                    'border-radius': '5px',
                }).show();

                $(this).mouseout(function () {
                    this.title = newtitle;
                    $('#mytitle').remove();
                });
            }
        });
    });
</script>

修改说明

1. if (this.title && this.title.trim() !== "")：
   • this.title: 确保 this.title 存在（不为 null 或 undefined）。
   • this.title.trim() !== "": 确保 title 属性不为空字符串 (使用 .trim() 去除首尾空格)。
2. newtitle = this.title;: 在 if 条件成立的情况下，我们才把 title 值赋给 newtitle。

解释

• 初始 newtitle: newtitle 变量的初始值确实是 undefined，但是我们的代码修改后只有当 <a> 标签的 title 存在时才赋值给它，从而避免了 undefined 的问题。
• this.title: this 指向当前触发事件的 <a> 标签。this.title 获取的就是该 <a> 标签的 title 属性值。
• trim(): .trim() 方法用来移除字符串首尾的空格，确保只有非空字符串才被视为有效的 title。
• 逻辑清晰: 修改后的代码逻辑更加清晰：只有当 <a> 标签的 title 属性存在且非空时，才创建自定义提示框，避免了 undefined 的出现。

总结

通过添加 this.title && this.title.trim() !== "" 的判断，可以确保只有在 <a> 标签有有效的 title 属性时，才会创建自定义提示框。这样就避免了 newtitle 为 undefined，从而解决了 undefined 提示框的问题。