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

Question

我有一些多年前写的 javascript。我刚刚注意到它在未包含对象的每个页面上的控制台中抛出错误。我收到类似...的错误

Cannot read property 'top' of undefined TypeError: Cannot read property 'top' of undefined

和

Uncaught TypeError: Cannot read property 'top' of undefined at placeLines (main.js:276) at HTMLDocument. (main.js:299) at j (jquery-3.1.1.min.js:2) at 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

编辑:我没有意识到你的意思是你想检查页面上的对象是否存在。我会推荐 Andy 在您的帖子评论中提到的支票。

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

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