Question

我创建的网站有一个状态栏，可根据用户的鼠标更新内部HTML。执行此操作的函数中包含一堆if语句，但如果if语句发现条件不存在则会引发很多错误。例如：我有一个if语句，用于检查子元素上方元素3父元素的id是什么：if( element.parentElement.parentElement.parentElement.id == 'body' )。但是因为我使用了一个函数，所以if语句会抛出错误＆＃39; Uncaught TypeError：无法读取属性＆＃39; parentElement＆＃39;当元素不符合该条件时，为null＆＃39; 。我的问题：有没有办法在我使用它之前首先检查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语句？

1 个答案: