Question

在下面的代码中，您可能会看到一些问题（或许多问题）。首先，我假设发送者元素在我的函数的第一行有一个ID。我的控制台充满了错误，因为一些调用此功能的div在我的html中没有ID（在我的实际网站中，这是问题的小复制）。我是否必须给他们ID？或者我可以先让功能检查他们是否有ID，然后继续？第二个问题是我的if语句。它总是试图检查调用此函数的每个元素的3个父元素！因此我在控制台中有很多错误 - 如何在不产生错误的情况下保持此功能的相同结果。对于Instance，在检查3个父元素的ID之前，我可以先查看它是否有3个父元素吗？我的代码如下，这里是 JSBIN： http://jsbin.com/somimoniva/1/edit

<html>
  <body>
    <div id = "boxContainer">
      <div id = "box">
        <div id = "content">
          <p id = "contentParagraph" 
             onmouseover = "someFunction( this );">content stuff</p>
        </div>
      </div>
    </div>

    <div id = "otherStuff" onmouseover = "someFunction( this );">
      other stuff
    </div>

    <script>
      function someFunction( element ){
        var elementId = element.id;
        var elementInner = document.getElementById( elementId ).innerHTML;

        if( document.getElementById( elementId ).parentElement
        .parentElement.parentElement.id == 'boxContainer' ){
          document.getElementById( 'otherStuff' ).innerHTML = 'content was hovered';
        }
      }
    </script>
  </body>
</html>

我没有使用jquery。

Answer 1

就我而言，这个'应用程序'的功能可以简化为以下脚本：

<script>
    function someFunction( element ){
        document.getElementById( 'otherStuff' ).innerHTML = 'content was hovered';
    }
</script>

根据this小提琴。

你甚至可以放弃id的大部分内容。

要回答更具体的问题，您可以先测试一个id，这样就不会引发错误：

function hasId(element){
    return typeof element.id != 'undefined';
}

<强>解决方案：

如何更改代码以使用上述方法。像这样：

function someFunction( element ){
    var parent = element.parentElement.parentElement.parentElement;

    if( hasId(parent) && parent.id == 'boxContainer' ){
        document.getElementById( 'otherStuff' ).innerHTML = 'content was hovered';
    }
}

这会检查id，同时还会检查id是否为"boxContainer"。这是一个fiddle。

Answer 2

关于检查元素ID的建议答案是错误的：

typeof element.id != 'undefined';

element.id将返回一个空字符串，如果DOM元素未指定ID（因此永远不会“未定义”）。要检查元素是否指定了ID，您可以执行以下操作：

element.hasAttribute('id')

或者：

element.hasOwnProperty('id')

甚至：

element.getAttribute('id') !== null

如何检查元素在纯javascript中是否有ID？和条件语句问题

2 个答案: