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

.top代わりに、.click メソッドのコールバック関数内にjQuery オブジェクトの作成と付着メソッドを配置すると、すべてが解決されます。クリック イベントにバインドされたセレクターが見つからない場合、コールバック関数は呼び出されません。

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 に答える