Question

我只有一步可以做，这项任务将完成。

ONMOUSEOVER事件应显示span标记之间的文本。现在，它在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中没有评论。但是：这些是对的限制行使。

无法对CSS或HTML进行任何更改
所有功能保持原样，
不能使用任何jQuery或任何其他库，
不能使用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', "");
    }
}

Answer 1

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

通过某些元素标准（例如span标记的第一个子元素获取特定元素更加可靠。

var firstSpan = this.getElementsByTagName("span")[0];
anchors[i].setAttribute('title', firstSpan);

Javascript获取第二个孩子的nodeValue？

1 个答案: