Question

我正在为标题中的application.js构建整个站点（rails应用程序）的函数，如下所示：

function scrollOnClick() {
  var topPosition = $('#comm_meta').offset().top;
  $('#comm_see_more a').click(function(event){
    $('html, body').animate({scrollTop:topPosition}, 'slow');
    event.preventDefault();
  });
}

function somethingElse() {
  // another functionality
}

$(document).ready(function() {  
  scrollOnClick();
  somethingElse();
});

某些功能在每个页面上使用，而其他功能仅在某些页面上使用。某些函数会出现如下错误，因为它们找不到匹配的元素：

TypeError: $(...).offset(...) is undefined

显然，所有功能都在所有页面上运行，但这真的是一个问题吗？如果找不到匹配的元素，如何避免错误？

更新

@Arun P Johny的回答给了我灵感，从最初的jQuery对象创建中删除了.top调用，并将其添加到.click方法中：

$('html, body').animate({scrollTop:topPosition.top}, 'slow');

这有效！没有更多的错误。问题是为什么呢？这里有适用的规则吗？

Answer 1

检查

function scrollOnClick() {
    var offset = $('#comm_meta').offset();

    //check offset exists else return without doing anything
    if (!offset) {
        return;
    }
    var topPosition = offset.top;
    $('#comm_see_more a').click(function (event) {
        $('html, body').animate({
            scrollTop: topPosition
        }, 'slow');
        event.preventDefault;
    });
}

function somethingElse() {
    // another functionality
}

$(document).ready(function () {
    scrollOnClick();
    somethingElse();
});

Answer 2

将jQuery对象创建和粘贴.top方法放在.click方法的回调函数中，而不是解决所有问题。如果找不到绑定到click事件的选择器，则永远不会调用回调函数。

function scrollOnClick() {
  $('#comm_see_more a').click(function(event){
    var topPosition = $('#comm_meta').offset().top;
    $('html, body').animate({scrollTop:topPosition}, 'slow');
    event.preventDefault();
  });
}

找不到匹配的元素时防止错误

2 个答案: