Javascript代碼錯誤

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]上時，它應該顯示「sometext3」時顯示「sometext2」。 [2]和[3]位於同一頁面上。我沒有在添加快速調試，看它是否拿起了錯誤的innerHTML做：Javascript代碼錯誤

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

來源

2013-04-25 Matthew

它看起來李你可能有不止一個元素的id爲'referenced'。每個html頁面的每個id應該是唯一的。 – Andbdrew 2013-04-25 02:36:43

你爲什麼不使用'e.target'？ – Blender 2013-04-25 02:37:19

@Blender原因我想獲取innerHTML的值來告訴顯示內容。我知道一些不好的方法，但我只是在快速做。 – Matthew 2013-04-25 02:38:43

修復它的壞的方式：

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添加到所有的元素和改變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>

來源

2013-04-25 03:01:51 Blender

感謝您的幫助，現在已修復。我知道我做錯了什麼，而且在我這樣做之前我經常不會接受它。 – Matthew 2013-04-25 03:17:27

一個問題似乎是，您在同一個頁面上有多個元素具有相同的ID。從您的代碼看來，您至少有三個元素的ID爲cited。

如果你想引用多個元素，你應該使用類。

來源

2013-04-25 02:38:44 Andbdrew

總是更好，那麼在代碼中會有什麼不同呢？如果我使用類或ID，我不會得到相同的確切事情嗎？ – Matthew 2013-04-25 02:42:53

Oooh ......我剛剛重新讀完了我是怎麼做到的......現在我明白了爲什麼它會導致這件事... Durrr ....我的笨拙時刻。 – Matthew 2013-04-25 02:56:22

感謝您的幫助，現在已修復。我把這些變成類，然後給每一個引用x的id在x變化。 – Matthew 2013-04-25 03:17:58

Javascript代碼錯誤

回答

相關問題