Question

我有一些多年前写的javascript。我刚注意到它在控制台上的每个页面上都没有出现错误，而且该对象并未包括在内。我得到像......这样的错误。

无法阅读财产＆＃39; top＆＃39;未定义的TypeError：无法读取物业＆＃39;顶部＆＃39;未定义的

和

未捕获的TypeError：无法读取属性＆＃39; top＆＃39;未定义的 at placeLines（main.js：276）在HTMLDocument。（main.js：299）在j（jquery-3.1.1.min.js：2）在k（jquery-3.1.1.min.js：2）

我正在运行的javascript如下：

$(function(){
    placeLines = function(){

        for(i=0; i<=9; i++){
            var Dy = $('.ball-container'+i).position().top - $('.ball-container'+(i+1)).position().top;
            var Dx = $('.ball-container'+(i+1)).position().left - $('.ball-container'+i).position().left;
            var length = Math.sqrt(Dy*Dy + Dx*Dx);
            var angle = Math.atan2(Dy, Dx) * (-1);
            var containerHeight = $('#animated-line > .inner').height();
            var transform = 'rotate('+angle + 'rad)';
            $('.line'+i).css({
                'transform': transform
            })

            var offsetTop = $('.ball-container'+i).offset().top +6;
            var offsetLeft= $('.ball-container'+i).offset().left +6;

            $('.line-box'+i).css({
                'width': length +'px'
                }).offset({
                left: offsetLeft,
                top: offsetTop
            });
        }
    };

    $(document).ready(function(){
        placeLines();
    });

    $(window).resize(function(){
        console.log('resizing');
        placeLines();
    });
});

如何停止这些错误，在运行脚本之前是否可以检查对象是否在页面上？父/包含div为animated-line。

提前致谢。

Answer 1

编辑：我没有意识到您想要检查网页上是否存在对象。我会推荐安迪在你的帖子评论中提到的支票。

if($('#animated-line').length > 0)可以作为placeLines()函数的第一行。然后它只会在函数存在时才会实际执行。或者，在$(document).ready和$(window).resize中，您可以进行以上检查;我只是尽量避免多余的检查。

另见：Is there an "exists" function for jQuery?

Answer 2

假设所有球容器都存在或没有，请更改

$(document).ready(function(){
    placeLines();
});

$(window).resize(function(){
    console.log('resizing');
    placeLines();
});

到

if ($('.ball-container0').length){ // check if ball containers exist and only then use the placeLines method

    $(document).ready(function(){
        placeLines();
    });

    $(window).resize(function(){
        console.log('resizing');
        placeLines();
    });
}

仅当指定对象在页面上时才运行脚本

2 个答案: