0

我只有一步要做，这个任务就完成了。

ONMOUSEOVER 事件应显示跨度标记之间的文本。现在，它在 span 标签之前显示文本（与链接文本相同）。这是第一个孩子，我需要获取下一个孩子作为 ONMOUSEOVER 的标题文本。我只是不知道如何访问它。

所以我的问题是：我在showTip函数行中写了什么：

anchors[i].setAttribute('title', this.firstChild.nodeValue);

下面是我的 HTML 代码和 JavaScript 代码以供参考。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Tool Tips</title>
  <link href="css.css" rel="stylesheet" type="text/css" />
  <script src="js.js" type="text/javascript"></script>
</head>

<body>

  <h1>Tool Tips</h1> 

  <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
<a href="http://en.wikipedia.org/wiki/Randy_Rhoads" class="tip">Randy Rhoads
<!-- TEXT FOR THE FIRST HOVER LINK IS BETWEEN THE <span> TAGS -->
<span> Randy Rhoads blah blah blah</span></a>Sed tincidunt pulvinar elit, ac porta dolor feugiat. 
<a href="http://en.wikipedia.org/wiki/Ty_Tabor" class="tip">Ty Tabor
<!-- TEXT FOR THE SECOND HOVER LINK IS BETWEEN THE <span> TAGS -->
<span> Ty Tabor blah blah blah</span></a> cras pellentesque, ligula et mattis varius, orci urna pellentesque   augue, in consectetur quam magna non elit. Nunc quis eros ac ante convallis pharetra. 
<a href="http://en.wikipedia.org/wiki/Andy_Timmons" class="tip">Andy Timmons
<!-- TEXT FOR THE THIRD HOVER LINK IS BETWEEN THE <span> TAGS -->
<span> Andy Timmons blah blah blah</span></a>In nec justo libero, a convallis quam.</p>
<a href="http://en.wikipedia.org/wiki/Joe_Bonamassa" class="tip">Joe Bonamassa
<!-- TEXT FOR THE FOURTH HOVER LINK IS BETWEEN THE <span> TAGS -->
<span> Joe Bonamassa blah blah blah</span></a> Duis ac est luctus  massa commodo lobortis eu eu eros.
</p>

</body>
</html>

JAVASCRIPT

JavaScript 中没有注释。但是：这些是练习的限制。

  1. 无法对 CSS 或 HTML 进行任何更改，
  2. 所有功能保持原样，
  3. 不能使用任何 jQuery 或任何其他库，
  4. 不能使用innerHTML。

请注意，唯一有问题的行是showTip()函数中的最后一行代码。

window.onload = prepareTips;

var anchors = document.getElementsByTagName('a');
var spans = document.getElementsByTagName('span');

function prepareTips() {

    if(!document.getElementsByTagName('a')) return false;

    for(var i=0; i<anchors.length; i++){
            anchors[i].onclick = showTip;
            anchors[i].onmouseover = showTip;
            anchors[i].onmouseout = hideTip;
    }
}
function showTip(variable) {

    this.setAttribute('href', '#');

    for(i=0; i<spans.length; i++) {
        this.classname = 'showTip';

            // *** THIS IS THE PROBLEM LINE ***
        anchors[i].setAttribute('title', this.firstChild.nodeValue);
    }
}
function hideTip(variable) {
    for(i=0; i<spans.length; i++) {
        this.classname = 'hideTip';
        anchors[i].setAttribute('title', "");
    }
}
4

1 回答 1

0

通常有一些您不知道的节点，例如包含回车的文本节点和包含您的评论的注释注释。您通常不能仅仅假设下一个节点就是您想要的。

span通过某些元素标准（例如作为标签的第一个子元素）来获取特定元素要可靠得多。

var firstSpan = this.getElementsByTagName("span")[0];
anchors[i].setAttribute('title', firstSpan);
于 2012-10-08T04:27:06.033 回答