长代码功能？

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-*属性，让我们说，让你的元素控制你想要滚动到的地方。

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