重复功能，我怎么可以将它们合并？

Question

我有一个函数保持几乎不变，除了不断变化的类名。我希望能够让代码少一点文字。我该如何去做它只是一个小功能，而不是重复它n次。我的关注也是关于删除被点击的最后一个活动类。我在这里只提供了2个实例，但是这个代码重复n次数。任何想法都将不胜感激。

 $('a.app1-preview').click(function() { 
      //remove last active classes 
        $(".app2").removeClass('active'); 
        $(".app2-preview").removeClass('active'); 
        //Add active class for this 
      $(this).parent().addClass('active'); 
      $(this).addClass('active'); 
      $('.app-preview-2').fadeOut("slow", function() { 
       $('.app-preview-1').fadeIn("slow"); 

      });   
     }); 

     $('a.app2-preview').click(function() { 
      //remove last active classes 
        $(".app1").removeClass('active'); 
        $(".app1-preview").removeClass('active'); 
        //Add active class for this 
        $(this).parent().addClass('active'); 
      $(this).addClass('active'); 
      $('.app-preview-1').fadeOut("slow", function() { 
       $('.app-preview-2').fadeIn("slow"); 
      });   
     }); 

HTML代码：

<div class="app-container"> 
       <ul class="apps"> 
        <li class="app1"> 
         <a title href="#" class="app1-preview blocklink"> 
          <span>ANOTHER<br /> APP</span> 
         </a> 
        </li> 
        <li class="app2"> 
         <a title href="#" class="app2-preview blocklink"> 
          <span>SECOND<br /> APP</span> 
         </a> 
        </li> 
</div> 

Answer 1

试图利用你有。主动类的事实。 ;）预览 - http://jsfiddle.net/evSqF/1/

JS：

<script> 
    $('a.blocklink').click(function() { 
     var self = $(this); 

     $('.active').fadeOut('slow', function(){ 
      $(this).removeClass('active'); 

      self.fadeIn('slow'); 
      self.addClass('active'); 
     }); 
    }); 
</script> 

HTML：

<div class="app-container"> 
    <ul class="apps"> 
     <li class="app1"> 
      <a title href="#" class="app1-preview blocklink"> 
       <span>ANOTHER<br /> APP</span> 
      </a> 
      <div class="app-preview active">App1 preview</div> 
     </li> 
     <li class="app2"> 
      <a title href="#" class="app2-preview blocklink"> 
       <span>SECOND<br /> APP</span> 
      </a> 
      <div class="app-preview">App2 preview</div> 
     </li> 
    </ul> 
</div> 

Answer 2

写一个函数，使功能为您提供：

function makeHandler(deactivate, fadeOut, fadeIn) { 
    return function() { 
     //remove last active classes 
     $(deactivate).removeClass('active'); 

       //Add active class for this 
     $(this).parent().addClass('active'); 
     $(this).addClass('active'); 
     $(fadeOut).fadeOut("slow", function() { 
      $(fadeIn).fadeIn("slow"); 

     });   
    }); 

然后：

$('a.app1-preview').click(makeHandler('.app2, .app2-preview', '.app-preview-2', '.app-preview-1')); 
$('a.app2-preview').click(makeHandler('.app1, .app1-preview', '.app-preview-1', '.app-preview-2')); 

你也许可以进一步简化事情重新思考命名召集人你有。

Answer 3

我建议定义一个函数：

function single(index_main, index_aux) { 
    // Does all your magic 
} 

$('a.app1-preview').click(function() { 
    single("1", "2"); 
}); 

$('a.app2-preview').click(function() { 
    single("2", "1"); 
}); 

这做的伎俩。

Answer 4

我为你做了一个jsfiddle的例子。看一看在这里，它使用的是你写的尽可能多的代码，所以有什么话要带给您惊喜将在那里:)

http://jsfiddle.net/2ZPxx/

基本上，我结束了与此HTML：

<div class="app-container"> 
    <ul class="apps"> 
     <li class="app1"> 
      <a title href="#" class="app1-preview blocklink" id="app1"> 
       <span>ANOTHER<br /> APP</span> 
      </a> 
     </li> 
     <li class="app2"> 
      <a title href="#" class="app2-preview blocklink" id="app2"> 
       <span>SECOND<br /> APP</span> 
      </a> 
     </li> 
</div> 
<div class="app-preview-app1 app-preview">App1 preview</div> 
<div class="app-preview-app2 app-preview">App2 preview</div> 

而且此javascript：

$('.apps li a').click(function() { 
    var id = $(this).attr('id'); 
    $('.apps li').removeClass('active'); 

    //Add active class for this 
    $(this).parent().addClass('active'); 
    $(this).addClass('active'); 
    $('.app-preview').fadeOut("slow", function() { 
     $('.app-preview-'+id).fadeIn("slow"); 
    });   
}); 

Answer 5

编辑：我得到了一些咖啡因后，我注意到的设置的问题。我在JSFiddle上创建了一个演示。标记将显示一个应用程序的“标题”，该标题将在点击时显示子描述，并隐藏其他同级描述的描述。

在这种情况下，您可以显示当前元素并隐藏兄弟，这将是一个更干净的解决方案，因为它随着您在更多应用程序元素中的扩展而变化。

$(".app").click(function() { 
    var $self = $(this); 
    var $apps = $self.closest(".apps"); 
    var $selfSiblings = $apps.children(".app").not($self); 

    $self.addClass(".active"); 
    $self.find(".app-preview").addClass("active"); 

    $selfSiblings.removeClass(".active"); 
    $selfSiblings.find(".app-preview").removeClass("active").fadeOut("slow", function() { 
     $self.find(".app-preview").fadeIn("slow"); 
    }); 
});​ 

我也建议你重写HTML这样：

<div class="app-container"> 
    <ul class="apps"> 
    <li class="app"> 
     App 1<br /> 
     <a title href="#" class="app-preview blocklink"> 
     <span>PREVIEW 1</span> 
     </a> 
    </li> 
    <li class="app"> 
     App 2<br /> 
     <a title href="#" class="app-preview blocklink"> 
     <span>PREVIEW 2</span> 
     </a> 
    </li> 
     <li class="app"> 
     App 3<br /> 
     <a title href="#" class="app-preview blocklink"> 
     <span>PREVIEW 3</span> 
     </a> 
    </li> 
</div>​