长代码成函数？ [关闭]

Question

此代码在我的页面中没有错误，因此我不在那里寻求任何帮助。我只是好奇是否有更短的方法可以做到这一点，有很多代码被重复，每次只更改一些类名。我可以在某种函数或循环中缩短它吗？谢谢

//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'});
            })

Answer 1

也许把所有东西都放到一个对象中，然后传递给一个函数：

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) 来绑定事件。

Answer 2

我会为每个可点击元素添加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'});
        })

Answer 3

您可以使用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' });
    });
});