1

HTMLドキュメントで傍白を作成しようとしています。傍白はインライン脚注のようになっています。リーダーが箇条書きにマウスを合わせると、脇の全文が表示されます。リーダーがマウスアウトすると、テキストは再び非表示になります。これを機能させるために必要なHTMLの量を最小限に抑えようとしているので、<span class="aside"...代わりにを使用しています<span onmousover="showAside();"...

とにかく、私はJavascriptにかなり慣れていないので、理解できないような本当に初心者のエラーに遭遇しています。以下のテストケースをブラウザにロードすると、脇のテキストが意図したとおりに箇条書きに置き換えられます。しかし、箇条書きの上または外にマウスを置くと、「this.elementisundefined」というエラーが表示されます。しかし、それはクラスのプロトタイプで定義されています！何が得られますか？

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script type="text/ecmascript">
<!--
var asides = [];

// object prototype
function Aside(aside_element)
{
  this.element = aside_element;
  this.text = this.element.innerHTML;
  this.element.onmouseover = this.show;
  this.element.onmouseout = this.hide;
  this.hide();
}
Aside.prototype.hide = function()
{
  this.element.innerHTML = "•";
}
Aside.prototype.show = function()
{
  this.element.innerHTML = this.text;
}

// get all <span> elements of class "aside"
function make_asides()
{
  span_elements = document.getElementsByTagName("span");
  for ( var i = 0, len = span_elements.length; i < len, span_element = span_elements[i]; ++i )
  {
    if ( span_element.className == "aside" )
      asides.push(new Aside(span_element));
  }
  return asides;
}

// initialize script
window.onload = function()
{
  make_asides();
}
-->
  </script>
  <title>Test Case</title>
</head>
<body>
  <p>Hover over the bullet and see the magic text! <span class="aside">This is the magic text.</span></p>
</body>
</html>
4

1 に答える 1

5

スコープが間違っているため、クロージャを操作する必要があります

var that = this;
this.element.onmouseover = function(){ that.show(); };
this.element.onmouseout = function(){ that.hide(); };
于 2012-04-09T16:14:24.733 に答える