-1

このコードは私のページにエラーがないので、私はそこで助けを求めていません. これを行うためのより短い方法があるかどうか、私はただ興味があります。毎回いくつかのクラス名が変更されるだけで、多くのコードが繰り返されています。何らかの関数またはループでこれを短くすることはできますか? ありがとう

//menu
            $('.aboutOne').click(function(){
                $.scrollTo('.basicsRow', 1000, {axis:'yx'});
                $.scrollTo('.basicsRow', 1000, {axis:'xy'});
            })
            $('.aboutTwo').click(function(){
                $.scrollTo('.storyRow', 1000, {axis:'yx'});
                $.scrollTo('.storyRow', 1000, {axis:'xy'});
            })
            $('.aboutThree').click(function(){
                $.scrollTo('.teamRow', 1000, {axis:'yx'});
                $.scrollTo('.teamRow', 1000, {axis:'xy'});
            })

            $('.aboutOne').click(function(){
                $.scrollTo('.basicsRow', 1000, {axis:'yx'});
                $.scrollTo('.basicsRow', 1000, {axis:'xy'});
            })
            $('.aboutTwo').click(function(){
                $.scrollTo('.storyRow', 1000, {axis:'yx'});
                $.scrollTo('.storyRow', 1000, {axis:'xy'});
            })
            $('.aboutThree').click(function(){
                $.scrollTo('.teamRow', 1000, {axis:'yx'});
                $.scrollTo('.teamRow', 1000, {axis:'xy'});
            })
            $('.titleOne').click(function(){
                $.scrollTo('.homeRow', 1000, {axis:'yx'});
                $.scrollTo('.homeRow', 1000, {axis:'xy'});
            })
            $('.docsOne').click(function(){
                $.scrollTo('.startRow', 1000, {axis:'yx'});
                $.scrollTo('.startRow', 1000, {axis:'xy'});
            })
            $('.docsTwo').click(function(){
                $.scrollTo('.pinpointRow', 1000, {axis:'yx'});
                $.scrollTo('.pinpointRow', 1000, {axis:'xy'});
            })
            $('.docsThree').click(function(){
                $.scrollTo('.swipeRow', 1000, {axis:'yx'});
                $.scrollTo('.swipeRow', 1000, {axis:'xy'});
            })
            $('.docsFour').click(function(){
                $.scrollTo('.restRow', 1000, {axis:'yx'});
                $.scrollTo('.restRow', 1000, {axis:'xy'});
            })
            $('.docsFive').click(function(){
                $.scrollTo('.actionRow', 1000, {axis:'yx'});
                $.scrollTo('.actionRow', 1000, {axis:'xy'});
            })
            $('.contactOne').click(function(){
                $.scrollTo('.contactRow', 1000, {axis:'yx'});
                $.scrollTo('.contactRow', 1000, {axis:'xy'});
            })
            $('.downloadOne').click(function(){
                $.scrollTo('.downloadRow', 1000, {axis:'yx'});
                $.scrollTo('.downloadRow', 1000, {axis:'xy'});
            })
4

3 に答える 3

3

おそらくすべてをオブジェクトに入れてから、関数に渡します。

var els = {
     '.aboutTwo':'.teamRow',
     '.aboutThree':'.homeRow',
     ...
};

function menu(els){
     $.each(els, function(a,b){
         $(a).click(function(){
            $.scrollTo(b, 1000, {axis: "yx"});
            $.scrollTo(b, 1000, {axis: "yx"});
         });
     });
}

// Call it
menu(els);

els最も管理しやすいはずです。何か変更があった場合は、オブジェクトを変更するだけです。

注: この機会に、イベントのバインドにjQuery の.on()( Docs ) を使用することをお勧めします。

于 2013-02-18T19:13:14.780 に答える
1

data-*属性を使用して、data-scroll-to代わりにスクロールしたい場所を要素に制御させることができます。

<button class="about" data-scroll-to=".basicsRow">Button</button>

例えば、

$("[data-scroll-to]").each(function() {
    var $this = $(this), target = $this.data("scroll-to");
    $this.click(function() {
        $.scrollTo(target, 1000, { axis: 'yx' });
        $.scrollTo(target, 1000, { axis: 'xy' });
    });
});
于 2013-02-18T19:16:53.733 に答える
1

クリック可能な各要素に属性を追加data-して、スクロール先を指定します。

 <a class="clicktoscroll aboutOne" data-row="basicsRow">...</a>

これで、イベント ハンドラーが 1 つだけ必要になります。

        $('.clicktoscroll').click(function(){
            var $row = $(this).data('row');
            $.scrollTo('.' + $row, 1000, {axis:'yx'});
            $.scrollTo('.' + $row, 1000, {axis:'xy'});
        })
于 2013-02-18T19:15:43.577 に答える