创建 if 语句以指示是否应使用 if 语句

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

本文关键字：if 语句 指示 创建 是否      更新时间：2023-09-26

我正在创建一个具有状态栏的网站，该状态栏根据用户鼠标悬停的内容更新其内部 HTML。这样做的函数中有一堆 if 语句，但如果 if 语句发现条件不存在，它会抛出很多错误。例如：我有一个 if 语句，用于检查子元素上方元素 3 父元素的 id 是什么，如下所示：if( element.parentElement.parentElement.parentElement.id == 'body' ) .但是因为我正在使用一个函数，所以当元素不满足该条件时，这个 if 语句会引发错误"未捕获的类型错误：无法读取 null 的属性'parentElement'"。我的问题：有没有办法在使用 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>

只需检查每个引用：

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

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

相关文章：