중복 기능은 어떻게 조합합니까?

Question

나는 변화하는 클래스 이름을 제외하고는 꽤 많이 변하지 않는 함수를 가지고있다. 나는 코드를 조금 덜 텍스트로 만들기를 바랐다. 어떻게하면 작은 함수를 반복하지 않고 번 n 번으로 반복 할 수 있습니까? 내 관심사는 또한 클릭 한 마지막 li에 대한 활성 클래스를 제거하는 것입니다. 여기서 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 코드 : 다음

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

     });   
    }); 

:

<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

시도를 당신이 .active는 클래스를 가지고 있다는 사실을 악용 할 수 있습니다. ;) 미리보기 - 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

당신을위한 기능을하는 함수를 작성

는

$('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 예제를 만들었습니다.

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

: 여기를 살펴 보라는

http://jsfiddle.net/2ZPxx/

는 기본적으로 나는이 HTML로 끝났다 :) 당신이있을 것입니다 놀라게한다만큼 당신은 가능한 쓴 코드, 그래서 아무것도를 사용

그리고이 자바 스크립트 :

$('.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>​