1

我正在尝试在 HTML 文档中留出余地。旁白应该像内联脚注。当读者将鼠标悬停在项目符号上时，将显示旁白的全文。当阅读器鼠标移出时，文本再次被隐藏。我正在尝试尽量减少完成这项工作所需的 HTML 数量，所以我使用<span class="aside"...而不是<span onmousover="showAside();"...

无论如何，我对 Javascript 还是很陌生，而且我遇到了一个我似乎无法弄清楚的真正新手错误。当我在浏览器中加载下面的测试用例时，旁边的文本按预期替换为项目符号。但是当我将鼠标悬停在项目符号上或离开项目符号时，我收到错误“this.element is undefined”。但它是在类原型中定义的！是什么赋予了？

<!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 回答