提示純JS

我想這個代碼，但我得到：document.getElementsByName(...).style is undefined提示純JS

我也有代表團的問題，我想。任何幫助？

<html> 
    <head> 
    <style type="text/css"> 
    #toolTip { 
     position:relative; 
     width:200px; 
     margin-top:-90px; 
    } 

    #toolTip p { 

     padding:10px; 
     background-color:#f9f9f9; 
     border:solid 1px #a0c7ff; 
     -moz-border-radius:5px;-ie-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px; 
    } 

    #tailShadow { 
     position:absolute; 
     bottom:-8px; 
     left:28px; 
     width:0;height:0; 
     border:solid 2px #fff; 
     box-shadow:0 0 10px 1px #555; 
    } 

    #tail1 { 
     position:absolute; 
     bottom:-20px; 
     left:20px; 
     width:0;height:0; 
     border-color:#a0c7ff transparent transparent transparent; 
     border-width:10px; 
     border-style:solid; 
    } 

    #tail2 { 
     position:absolute; 
     bottom:-18px; 
     left:20px; 
     width:0;height:0; 
     border-color:#f9f9f9 transparent transparent transparent; 
     border-width:10px; 
     border-style:solid; 
    } 
    </style> 
    <script type='text/javascript'> 
    function load() { 
      var elements = document.getElementsByName('toolTip'); 
      for(var i=0; i<elements.length; i++) { 
       document.getElementsByName(elements[i]).style.visibility = 'hidden'; 
      } 
     } 
    </script> 

    </head> 



    <body onload="load()"> 
    <br><br><br><br><br><br><br><br><br><br><br><br> 
    <a class="hd" 
    onMouseOver="document.getElementsByName('toolTip')[0].style.visibility = 'visible'" 
    onmouseout ="document.getElementsByName('toolTip')[0].style.visibility = 'hidden'">aqui</a> 
    <div id="toolTip" name="toolTip"> 
     <p>i can haz css tooltip</p> 
     <div id="tailShadow"></div> 
     <div id="tail1"></div> 
     <div id="tail2"></div> 
    </div> 

    <br><br><br> 
    <a class="hd" 
    onMouseOver="document.getElementsByName('toolTip')[0].style.visibility = 'visible'" 
    onmouseout ="document.getElementsByName('toolTip')[0].style.visibility = 'hidden'">aqui</a> 
    <div id="toolTip" name="toolTip"> 
     <p>i can haz css tooltip</p> 
     <div id="tailShadow"></div> 
     <div id="tail1"></div> 
     <div id="tail2"></div> 
    </div> 

    </body> 
    </html>

demo

來源

2012-12-04 anvd

您有重複的ID，這是不可能的（根據定義，唯一ID是 –

嘗試更改ID toolTip一類：

<div class="toolTip">...</div>

，改變你的JS使用display風格的東西，而不是知名度，十二次的onmouseover的最好用JS事件委託辦理：

function load() 
{ 
    var i, tooltips = document.getElementsByClassName('toolTip'), 
    mouseOver = function(e) 
    {//handler for mouseover 
     e = e || window.event; 
     var i, target = e.target || e.srcElement, 
     targetToolTip = target.nextElementSibling || nextSibling;//gets the next element in DOM (ie the tooltip) 
     //check if mouse is over a relevant element: 
     if (target.tagName.toLowerCase() !== 'a' || !target.className.match(/\bhd\b/)) 
     {//nope? stop here, then 
      return e; 
     } 
     targetToolTip.style.display = 'block';//make visible 
     for (i=0;i<tooltips.length;i++) 
     {//closures are neat --> you have a reference to all tooltip elements from load scope 
      if (tooltips[i] !== targetToolTip) 
      {//not the one you need to see 
       tooltips[i].style.display = 'none'; 
      } 
     } 
    }; 
    for (i=0;i<tooltips.length;i++) 
    { 
     tooltips[i].style.display = 'none'; 
    } 
    //add listener: 
    if (document.body.addEventListener) 
    {//IE > 9, chrome, safari, FF... 
     document.body.addEventListener('mouseover',mouseOver,false); 
    } 
    else 
    {//IE8 
     document.body.attachEvent('onmouseover',mouseOver); 
    } 
}

谷歌JavaScript事件委託和關閉，如果這段代碼不清楚，但這就是我將如何解決這種事情。國際海事組織，這是相當有效的（你可以使用封閉範圍跟蹤這是當前可見的，並通過所有的人都沒有循環，太提示，這將是更好的：

function load() 
{ 
    var i, tooltips = document.getElementsByClassName('toolTip'), 
    currentToolTip,//<-- reference currently visible 
    mouseOver = function(e) 
    { 
     e = e || window.event; 
     var i, target = e.target || e.srcElement, 
     targetToolTip = target.nextElementSibling || nextSibling; 

     if (target.tagName.toLowerCase() !== 'a' || !target.className.match(/\bhd\b/) || targetToolTip === currentToolTip) 
     {//add check for currently visible TT, if so, no further action required 
      return e; 
     } 
     if (currentToolTip !== undefined) 
     { 
      currentToolTip.style.display = 'none';//hide currently visible 
     } 
     targetToolTip.style.display = 'block';//make new visible 
     currentToolTip = targetToolTip;//keep reference for next event 
    }; 
    for (i=0;i<tooltips.length;i++) 
    { 
     tooltips[i].style.display = 'none'; 
    } 
    if (document.body.addEventListener) 
    { 
     document.body.addEventListener('mouseover',mouseOver,false); 
    } 
    else 
    { 
     document.body.attachEvent('onmouseover',mouseOver); 
    } 
}

而你有

編輯：
要隱藏鼠標移開時的提示，您可以直接添加第二個監聽器：

function load() 
{ 
    var i, tooltips = document.getElementsByClassName('toolTip'), 
    currentToolTip,//<-- reference currently visible 
    mouseOver = function(e) 
    { 
     e = e || window.event; 
     var i, target = e.target || e.srcElement, 
     targetToolTip = target.nextElementSibling || nextSibling; 

     if (target.tagName.toLowerCase() !== 'a' || !target.className.match(/\bhd\b/) || targetToolTip === currentToolTip) 
     {//add check for currently visible TT, if so, no further action required 
      return e; 
     } 
     if (currentToolTip !== undefined) 
     { 
      currentToolTip.style.display = 'none';//hide currently visible 
     } 
     targetToolTip.style.display = 'block';//make new visible 
     currentToolTip = targetToolTip;//keep reference for next event 
    }, 
    mouseOut = function(e) 
    { 
     e = e || window.event; 
     var movedTo = document.elementFromPoint(e.clientX,e.clientY);//check where the cursor is NOW 
     if (movedTo === curentToolTip || currentToolTip === undefined) 
     {//if cursor moved to tooltip, don't hide it, if nothing is visible, stop 
      return e; 
     } 
     currentTooltip.style.display = 'none'; 
     currentTooltip = undefined;//no currentToolTip anymore 
    }; 
    for (i=0;i<tooltips.length;i++) 
    { 
     tooltips[i].style.display = 'none'; 
    } 
    if (document.body.addEventListener) 
    { 
     document.body.addEventListener('mouseover',mouseOver,false); 
     document.body.addEventListener('mouseout',mouseOut,false); 
    } 
    else 
    { 
     document.body.attachEvent('onmouseover',mouseOver); 
     document.body.attachEvent('onmouseout',mouseOut); 
    } 
}

請注意，這完全沒有經過測試。我不完全確定如果IE < 9支持elementFromPoint（獲取以某個座標呈現的DOM元素），或者即使IE事件對象具有clientX和clientY屬性，但我想快速谷歌會告訴你更多，包括如何獲得座標以及在老式的，可怕的，可怕的IE8下找到的元素，但是這個應該幫助你的方式。當然，如果你不想提示的內容可以進行選擇，只是改變了mouseOut功能：

mouseOut = function(e) 
{ 
    e = e || window.event; 
    var target = e.target || e.srcElement; 
    if (currentToolTip) 
    { 
     currentToolTip.style.diplay = 'none'; 
     currentToolTip = undefined; 
    } 
};

無需檢查，如果鼠標移出是正確的元素上，只檢查是否有當前的工具提示，並隱藏它。

來源

2012-12-04 11:51:10

http://jsbin.com/imosiz/3/edit只有一個問題。工具提示是持久的。謝謝！ – anvd

哦，在這種情況下，爲'onmouseout'事件添加第二個監聽器會做，我會添加幾個建議 –

@anvd：你去了，我已經添加了2個建議：一個_not_隱藏工具提示if光標在它上面，另一個在鼠標離開錨點時隱藏工具提示（好吧，客戶端移出哪個元素並不重要，如果工具提示是可見的，它將始終是類' hd'） –

嘗試使用類來標記提示：

$('.toolTip').attr('visibility', 'hidden')

絕對清理：

<div id="toolTip1" class="toolTip"> 
    <p>i can haz css tooltip</p> 
    <div id="tailShadow"></div> 
    <div id="tail1"></div> 
    <div id="tail2"></div> 
</div>

和jQuery使用類作爲選擇切換的知名度非唯一的ID - 這會導致你無法結束麻煩，否則

來源

2012-12-04 11:42:26

）這裏的jQuery標籤在哪裏？請不要假設整個世界都使用jQuery。有些人只是想了解更多關於JS工作方式的信息 –

好吧，我關於缺少標籤的看法，但同時OP沒有明確表示他們想要非jQuery解答（畢竟， jQuery仍然是JavaScript下的:)）。 jQuery解決方案仍然是一個可行的選擇，並且在我看來更優雅（當然，OP沒有特別要求排除jQuery） - 直到OP來決定我的猜測。 –

確定OP指定他不想要jQ答案：問題的標題（_「純JS中的工具提示」）對此非常清楚。如果標題有什麼不同，那麼說jQ是一個有效的答案是絕對正確的......順便說一句：當然jQ是引擎蓋下的JS，但我只是那些無法忍受不知道什麼在發動機罩下發生:)。 –

您的問題可能是因爲您對這兩個工具提示使用了相同的id。這是無效的;一個id應該是唯一的 - 給定頁面中只有一個元素應該有一個特定的ID。

如果您需要多個對象的共享標識符，請改爲使用class。

來源

2012-12-04 11:42:58 SDC

回答

相關問題