5

私はこのjQuery関数を持っています:

$('.scrollToLoginBox').click(function(){
    $('html, body').animate({scrollTop: $("#LoginBox").offset().top-5}, 'slow');                
});

クラスとしては使いたくありません。次のように呼び出せるようにしたいと思います。onClick="scrollTo(id);"

では、関数を JavaScript 形式にするにはどうすればよいですか。

function scrollTo(id){
    $('html, body').animate({scrollTop: $("#'+id+'").offset().top-5}, 'slow');
}

出版社による編集：

私はあなたたちを嫌いではありません ;o) すべての回答に感謝しますが、ID を取得しようとしているわけではありません。一方、上で公開したのと同じ機能を構築しようとしています。そのため、クリックすると id (Ex. Login または LoginBox がある) が送信されるため、関数はゆっくりとアンカー (id=Login または LoginBox) にスクロールします。

今度は、class="scrollToLoginBox" のように呼び出す必要があります。代わりに、onClick="scrollTo('LoginBox'); と呼びたいと思います。

IDごとに1つずつ、上記のような20の同一の関数があります。私が持っていて望んでいない別の例は、class="scrollToSettings" ですが、代わりに onClick="scrollTo('LoginBox'); または onClick="scrollTo('Settings'); と呼びたいと思います。

            $('.scrollToSettings').click(function(e){
        $('html, body').animate({scrollTop:$("#settings").offset().top-5}, 'slow');         
        return false;       
    });

    $('.scrollToFaqs').click(function(e){
        $('html, body').animate({scrollTop:$("#formCode").offset().top-5}, 'slow');         
        return false;       
    });

IDを受け取る関数は1つだけにしたいです。このjQuery関数にIDを渡す方法がわかりません;o)

4

1 に答える 1

8

クリックされているアイテムにIDを渡したい場合は、使用する必要がありますthis.id

ライブデモ

onClick="scrollTo(this.id);"

ID を渡したい場合はsome other control、ID を文字列として渡すだけです。

onClick="scrollTo('idOfHTMLElement');"

HTML要素からJavaScript関数に値を渡すために、コメントに基づいて編集します。

データ属性はカスタム属性を保持するために使用され、jQuery 関数でdata()関数を使用してアクセスできます。

HTML

<div class="scrollToCal" data-idtopass="Anchor">click me to go to Anchor</div>​

Javascript

jQuery(document).ready(function($) {

    $('.scrollToCal').click(function() {

        $('html, body').animate({
            scrollTop: $('#' + $(this).data('idtopass')).offset().top - 5
        }, 'slow');
        return false;
    });

});​
于 2012-12-24T09:29:50.807 に答える