重複功能，我怎麼可以將它們合併？

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