Question

   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"; 
    }

Answer 1

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

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

Answer 2

修复它的方法不好：

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更改为class es，但这会变得笨拙，所以这是一个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>

Javascript代码中的错误

2 个答案: