자바 스크립트 코드에서 오류가 발생했습니다.

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

나쁜 방법 :

이 더 좋은 방법이 class ES 자신의 id들 모든 요소에 이벤트 리스너를 추가하고 변경하는 것입니다,하지만 그 서투른 도착, 그래서 여기에 jQuery를 솔루션입니다

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

:

는

$('.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> 

Answer 2

하나의 문제는 동일한 ID로 동일한 페이지에 여러 요소가있는 것으로 보입니다. 코드에서 ID가 cited 인 요소가 3 개 이상있는 것으로 보입니다.

두 개 이상의 요소를 참조하려면 클래스를 사용해야합니다. 그것을 고정