为是否应使用 if 语句创建 if 语句？

Question

我正在创建一个具有状态栏的网站，该状态栏会根据用户鼠标悬停的内容更新其 innerHTML。执行此操作的函数中有一堆 if 语句，但如果 if 语句发现条件不存在，则会抛出很多错误。例如：我有一个 if 语句来检查子元素上方的元素 3 父元素的 id，如下所示：if( element.parentElement.parentElement.parentElement.id == 'body' )。但是因为我使用的是一个函数，所以当元素不满足该条件时，此 if 语句会抛出错误 'Uncaught TypeError: Cannot read property 'parentElement' of null'。我的问题：有没有办法在我使用之前先检查 if 语句是否有效？这听起来可能很愚蠢，但这似乎是避免错误的唯一方法，除非我使用多个函数——这是我不想要的。我的代码在下面，这是我程序的一个非常简化版本的 JS BIN：http://jsbin.com/hefotifopo/1/edit（打开控制台查看我的错误）。

<html>
    <body>
        <header id = "header" onmouseover = "statusSet( this )">
            <p>Header</p>
        </header>

        <section id = "body">
            <div id = "area1">
                <div>
                    <p id = "p1" onmouseover = "statusSet( this )">
                        paragraph
                    </p>
                    <p id = "p2" onmouseover = "statusSet( this )">
                        paragraph
                    </p>
                    <p id = "p3" onmouseover = "statusSet( this )">
                        paragraph
                    </p>
                </div>
            </div>
        </section>

        <footer><p id = "statusBar">Status Bar</p></footer>

        <script>
            document.body.addEventListener( 'mouseover', function( element ){
                statusSet( element.target );
            });

            function statusSet( element ){
                var elementId = element.id;
                var elementInner = element.innerHTML;

                if( elementId == 'body' || elementId == 'statusBar'  ){
                    document.getElementById( 'statusBar' )
                    .innerHTML = 'hovering over body';
                }
                else if( element.parentElement.parentElement
                .parentElement.id == 'body' ){
                    document.getElementById( 'statusBar' )
                    .innerHTML = 'hovering over paragraphs';
                }
                else if( element.id == 'header' ){
                    document.getElementById( 'statusBar' )
                    .innerHTML = 'hovering over header';
                }
            }
        </script>
    </body>
</html>

Answer 1

只需检查每个参考文献：

else if (element.parentElement && element.parentElement.parentElement && element.parentElement.parentElement && element.parentElement.parentElement.parentElement.id == "body")

最好找到一种不那么脆弱的方法来确定正在发生的事情，例如通过给元素类来区分它们的不同性质。依赖这样的文档结构意味着如果您对文档进行微小的更改，则必须更新 JavaScript。

为是否应使用 if 语句创建 if 语句？

Creating an if statement for whether or not an if statement should be used?

javascript

if-statement