0 
   if(e.target.id == "cited"){
        alert(e.target.innerHTML);
        if (document.getElementById(e.target.id).innerHTML == "[1]") {
            display = "sometext1";  
        }
        else if (document.getElementById(e.target.id).innerHTML == "[2]") {
            display = "sometext2";
        }
        else if (document.getElementById(e.target.id).innerHTML == "[3]") {
            display = "sometext3";
        }

好吧，当我将鼠标悬停在我的 [3] 上时，它会显示“sometext2”，而它应该显示“sometext3”。[2] 和 [3] 在同一页上。我确实添加了一个快速调试，以查看它是否通过执行以下操作获取错误的 innerHTML：

alert(e.target.innerHTML);

当我将鼠标悬停在警报消息中时，它会显示正确的，但我不知道为什么它显示错误的工具提示。这里有什么帮助吗？

    document.onmousemove = function(e)
{
    // e.target, e.srcElement and e.toElement contains the element clicked.
    var x = e.pageX;
    var y = e.pageY;
    var display;
    if(e.target.id == "cited"){
    //  alert(e.target.innerHTML);
        if (document.getElementById(e.target.id).innerHTML == "[1]") {
            display = "sometext1";  
        }
        else if (document.getElementById(e.target.id).innerHTML == "[2]") {
            display = "sometext2";
        }
        else if (document.getElementById(e.target.id).innerHTML == "[3]") {
            display = "sometext3";
        }
        document.getElementById("toolTip").style.top = y-50+"px";
        document.getElementById("toolTip").style.left = x+"px";
        document.getElementById("toolTip").style.visibility = "visible";
        document.getElementById("toolTip").innerHTML = "<p>"+display+"</p>";
    }
    else {
        document.getElementById("toolTip").style.visibility = "hidden"; 
    }
4

2 回答 2

2

一个问题似乎是您在同一页面上有多个具有相同 ID 的元素。从您的代码中，您似乎至少有三个带有 id 的元素cited。

如果要引用多个元素，则应使用类。

于 2013-04-25T02:38:44.647 回答
1

修复它的坏方法：

document.onmousemove = function (e) {
    var x = e.pageX;
    var y = e.pageY;
    var display;

    if (e.target.id == "cited") {
        if (e.target.innerHTML == "[1]") {
            display = "sometext1";
        } else if (e.target.innerHTML == "[2]") {
            display = "sometext2";
        } else if (e.target.innerHTML == "[3]") {
            display = "sometext3";
        }

        document.getElementById("toolTip").style.top = y - 50 + "px";
        document.getElementById("toolTip").style.left = x + "px";
        document.getElementById("toolTip").style.visibility = "visible";
        document.getElementById("toolTip").innerHTML = "<p>" + display + "</p>";
    } else {
        document.getElementById("toolTip").style.visibility = "hidden";
    }
}

更好的方法是将事件监听器添加到所有元素并将它们id的 s 更改为classes，但这会变得笨拙，所以这里有一个 jQuery 解决方案：

$('.cited').mousemove(function(e) {
    $('#tooltip').css({
        top: e.pageY - 50 + 'px',
        left: e.pageX + 'px',
        text: $(this).data('tooltip')
    });
}).mouseleave(function() {
    $('#tooltip').hide();
}).mouseenter(function() {
    $('#tooltip').show();
});

您可以将 HTML 更改为：

<span class="cited" data-tooltip="This is the tooltip text">Foo</span>
<span class="cited" data-tooltip="This is the tooltip text">Bar</span>
于 2013-04-25T03:01:51.413 回答