Code long dans la fonction?

Question

Ce code n'a aucune erreur dans ma page, donc je ne cherche pas d'aide là-bas. Je suis juste curieux de savoir s'il y a un moyen plus court de le faire, il y a beaucoup de code répété avec seulement quelques noms de classes changés à chaque fois. Est-ce que je pourrais faire cela plus court dans une fonction ou une boucle de quelque sorte? Merci

//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

peut-être mis tout en un objet, puis passer à une fonction:

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

devrait vous donner plus de gestion - si tout ce que vous change simplement l'objet de modifier els.

NOTE: Je voudrais profiter de cette occasion pour souligner qu'il est suggéré d'utiliser le .on() (Docs) de jQuery pour les événements de liaison.

Answer 2

Je voudrais ajouter data- attributs à chaque élément cliquable pour indiquer ce que vous voulez faire défiler jusqu'à:

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

Maintenant, vous avez juste besoin d'un gestionnaire d'événements:

 $('.clicktoscroll').click(function(){ 
      var $row = $(this).data('row'); 
      $.scrollTo('.' + $row, 1000, {axis:'yx'}); 
      $.scrollTo('.' + $row, 1000, {axis:'xy'}); 
     }) 

Answer 3

Vous pouvez utiliser un data-* attribut, disons , et laissez vos éléments contrôler où vous voulez faire défiler à la place.

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

Par exemple,

$("[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' }); 
    }); 
});