-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-为每个可点击元素添加属性以指定您希望它滚动到的内容：

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

现在您只需要一个事件处理程序：

        $('.clicktoscroll').click(function(){
            var $row = $(this).data('row');
            $.scrollTo('.' + $row, 1000, {axis:'yx'});
            $.scrollTo('.' + $row, 1000, {axis:'xy'});
        })
于 2013-02-18T19:15:43.577 回答
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 回答