jQueryコードを書くための良い方法はありますか？

Question

私は、スタッフページの情報を表示したり微妙に隠すためのJavaScriptをいくつか作成しました。基本的に、3つのエンブレムと3つの説明があります。デザインエンブレムの上にマウスを置くと、デザインチームの説明とイメージが表示されます（その逆も同様です）。ここでは、この行うに私のコードです：

$('.emblem img:first').hover(
      function() { 
       $('.description:eq(1), .description:eq(2)').css({opacity : 0.2}); 
       $('.devStaff').css({opacity : 0.2}); 
      }, 
      function(){ 
       $('.description:eq(1), .description:eq(2)').css({opacity : 1}); 
       $('.devStaff').css({opacity : 1}); 
      } 
     ); 

     $('.emblem img:eq(1)').hover(
      function() { 
       $('.description:eq(0), .description:eq(2)').css({opacity : 0.2}); 
       $('.designStaff').css({opacity : 0.2}); 
      }, 
      function(){ 
       $('.description:eq(0), .description:eq(2)').css({opacity : 1}); 
       $('.designStaff').css({opacity : 1}); 
      } 
     ); 

     $('.emblem img:eq(2)').hover(
      function() { 
       $('.description:eq(0), .description:eq(1)').css({opacity : 0.2}); 
       $('.designStaff').css({opacity : 0.2}); 
      }, 
      function(){ 
       $('.description:eq(0), .description:eq(1)').css({opacity : 1}); 
       $('.designStaff').css({opacity : 1}); 
      } 
     ); 

は今、このを見ては、私は間違いなくこれを行うには良い方法があることを感じ、私は誰もがいくつかのアドバイスを提供することができるだろうか不思議でしたか？

Answer 1

を一般的に、あなた自身を繰り返してはならない（http://en.wikipedia.org/wiki/Don」 t_repeat_yourself）

function fadeOut(eqNum1, eqNum2) { 
    $('.description:eq('+eqNum1+'), .description:eq('+eqNum2+')').css({opacity : 0.2}); 
    $('.devStaff').css({opacity : 0.2}); 
} 
function fadeIn(eqNum1, eqNum2){ 
    $('.description:eq('+eqNum1+'), .description:eq('+eqNum2+')').css({opacity : 1}); 
    $('.devStaff').css({opacity : 1}); 
} 

$('.emblem img:first').hover(fadeOut(1,2), fadeIn(1,2)); 

$('.emblem img:eq(1)').hover(fadeOut(0,2),fadeIn(0,2)); 

$('.emblem img:eq(2)').hover(fadeOut(0,1),fadeIn(0,1)); 

Answer 2

私はしばらく前にブックマークしたこれらの規則に従います。私は少なくとも第1に従ってください。

http://www.artzstudio.com/2009/04/jquery-performance-rules/

Answer 3

あなたは:lt(3)によって:first、:eq(1)と:eq(2)を置き換えることができます。

$('.emblem img:lt(3)').hover(
     function() { 
      $('.description:lt(2)').css({opacity : 0.2}); 
      $('.designStaff').css({opacity : 0.2}); 
     }, 
     function(){ 
      $('.description:lt(2)').css({opacity : 1}); 
      $('.designStaff').css({opacity : 1}); 
     } 
    );