有没有更好的方法来写我的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

我遵循这些规则，我前一段时间书签，我至少会遵循第一个规则，使用#id而不是.class作为最低要求。

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