0

我有一个用 DOM 和 Javascript 创建的小代码。它应该在链接下方创建一个工具提示。它适用于一个链接，但现在我刚刚意识到我确实需要有多个链接，所以我不能<a id>像现在使用的那样使用。

在我的代码中，我目前已经注释掉了 xmlhttp 部分，但我将来确实需要它。别管它。

Javascript：

   function createTooltip(str)
   {
      if (str == "" || !str)
      {
         return;
      }

      if (window.XMLHttpRequest)
      {
         xmlhttp = new XMLHttpRequest();
      }
      else // for IE5 and IE6
      {
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }

      /*xmlhttp.onreadystatechange = function()
      {
         if (xmlhttp.readyState==4 && xmlhttp.status==200)
         {*/
            //document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            var tooltip = document.createElement("div");
            var link = document.getElementById("tooltip");
            tooltip.setAttribute('id', 'tooltip-style');
            tooltip.innerHTML = "<p>piece of crap</p>";

            if (str == link.rel)
            {
               link.parentNode.insertBefore(tooltip, link.nextSibling);
            }
         /*}
      }
      xmlhttp.open("GET", "tooltip.php?s="+str, true);
      xmlhttp.send();*/
   }

   function removeTooltip(str)
   {
      var tooltip = document.getElementById("tooltip-style");
      tooltip.setAttribute('id', '');
      tooltip.innerHTML = "";
   }

HTML：

<a href="#" rel="35" onmouseover="createTooltip(this.rel);" onmouseout="removeTooltip(this.rel);" id="tooltip">Item</a><br><br>
<a href="#" rel="25" onmouseover="createTooltip(this.rel);" onmouseout="removeTooltip(this.rel);" id="tooltip">Item</a>

该代码应该在您悬停的链接下方创建一个 div 块，而不是在每个链接上。我尝试使用 getElementByClassName 玩了几个小时，但我无法让它工作。还要注意的是，该<a rel>值在未来不太可能成为唯一值。

感谢您的时间。我很感激。

4

1 回答 1

0 
var a = getElementsByClassName('classname');
for(var i=0; i<a.length; i++){
     //each element will be a[i] do whatever with them you want
}
于 2013-11-10T16:34:12.010 回答