Question

请阅读并尝试以下代码。点击“foo”段落。看看浏览器控制台，我没有看到预期的结果，而如果我点击“bar”，我会这样做。

为什么会这样？

<!DOCTYPE HTML PUBLIC
  "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
  </head>
  <body>
    <div class="root">
      <div>
        <p id="foo">foo</p>
      </div>
      <p id="bar">bar</p>
    </div>
    <script type="text/javascript">
      var p_list = document.getElementsByTagName('P');
      for (var n=0; n<p_list.length; n++) {
        p_list[n].onclick = function() {
          console.log('ONCLICK - id: ' + this.id + ' - ' + getC( this ) + '\n');
        };
      }
      function getC( P ) {
        if (P.parentNode.className === 'root') {
          console.log('INSIDE FUNCTION - id: ' + P.id + ' - ' + P.parentNode);
          return P.parentNode;
        } else {
          getC( P.parentNode );
        }
      }
    </script>
  </body>
</html>

直播代码：http://jsbin.com/izuleg/1/edit

Answer 1

您在return子句中错过了else语句。它应该是：

...

} else {
    return getC( P.parentNode );
}

请注意，您正在使用递归函数（一个自我调用的函数），因此您应该添加额外的预防措施，使其在特殊情况下返回某些内容（例如，没有类“root”的节点），否则你会得到一个无限递归和一个堆栈溢出错误。

Answer 2

这是你的错误。你应该返回getC的结果，而不是只是调用它。

function getC( P ) {
    if (P.parentNode.className === 'root') {
      console.log('INSIDE FUNCTION - id: ' + P.id + ' - ' + P.parentNode);
      return P.parentNode;
    } else {
      return getC( P.parentNode );
    }
  }

Answer 3

您错过了<div>和</div>代码，请检查：

    <div class="root">
          <div>
            <p id="foo">foo</p>
          </div>
          <div>
            <p id="bar">bar</p>
          </div>
    </div>

Javascript“this”通过不同的范围

3 个答案: