長代碼功能？

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