0

やるべきことは 1 つだけで、この割り当ては完了します。

ONMOUSEOVER イベントは、span タグの間にあるテキストを表示する必要があります。現在、span タグの直前のテキスト (リンク テキストと同じ) を表示しています。これは firstChild です。次の子を 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 にはコメントはありません。ただし、これらは演習の制限です。

  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 に答える