0

我正在标题中的 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 的回答给了我灵感，让我.top从最初的 jQuery 对象创建中删除调用并将其添加到.click方法中：

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

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

4

2 回答 2

0

查看

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();
});
于 2013-08-29T11:13:25.497 回答
0

将 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();
  });
}
于 2013-08-29T13:18:26.457 回答