JQuery와 : 짧은 코드 (VAR & 경우) 바보 같은 질문은 아마,하지만 난 코드가 작동하지하지 문제가

Question

이 -이

모든 것이 잘 작동하지만, 예를 들어 ... 코드가 너무 깁니다 오히려입니다/ 경우 을 줄이는 방법이 있습니까? 또는 4 가지 다른 var을 추적 할 수 있습니까?

var transitionState_N = '-'; 
var transitionState_X = '-'; 
var transitionState_Y = '-'; 
var transitionState_Z= '-'; 

// carousel 4way 
function carousel_4way_N (n, el, m) { 
    var carousel = '#carousel-4way-nav-' + n 
    var carousel_content = '#carousel-4way-' + n 
     if (transitionState_N == '-') 
      { 
      transitionState_N = '+'; 
      } 
      else 
      { 
      transitionState_N = '-'; 
      } 
     $(carousel_reset).hide(); 
     $(carousel).transition(
     {y: m + '=10',delay:200} 
     ); 
     }; 

function carousel_4way_X (n, el, m) { 
    var carousel = '#carousel-4way-nav-' + n 
    var carousel_content = '#carousel-4way-' + n 
     if (transitionState_X == '-') 
      { 
      transitionState_X = '+'; 
      } 
      else 
      { 
      transitionState_X = '-'; 
      } 
     $(carousel_reset).hide(); 
     $(carousel).transition(
     {y: m + '=10',delay:200} 
     ); 
     }; 

function carousel_4way_Y (n, el, m) { 
    var carousel = '#carousel-4way-nav-' + n 
    var carousel_content = '#carousel-4way-' + n 
     if (transitionState_Y == '-') 
      { 
      transitionState_Y = '+'; 
      } 
      else 
      { 
      transitionState_Y = '-'; 
      } 
     $(carousel_reset).hide(); 
     $(carousel).transition(
     {y: m + '=10',delay:200} 
     ); 
     }; 

function carousel_4way_Z (n, el, m) { 
    var carousel = '#carousel-4way-nav-' + n 
    var carousel_content = '#carousel-4way-' + n 
     if (transitionState_Z == '-') 
      { 
      transitionState_Z = '+'; 
      } 
      else 
      { 
      transitionState_Z = '-'; 
      } 
     $(carousel_reset).hide(); 
     $(carousel).transition(
     {y: m + '=10',delay:200} 
     ); 
     }; 

$('#carousel-4way-nav-1').click(function(event){ 
    $(carousel_reset_nav).not(this).transition(
    {y:0}); 
    return carousel_4way_N(1, this, (transitionState == '-') ? '+' : '-'); 
    event.preventDefault(); 
}); 

$('#carousel-4way-nav-2').click(function(event){ 
    $(carousel_reset_nav).not(this).transition(
    {y:0}); 
    return carousel_4way_X(2, this, (transitionState == '-') ? '+' : '-'); 
    event.preventDefault(); 
}); 

$('#carousel-4way-nav-3').click(function(event){ 
    $(carousel_reset_nav).not(this).transition(
    {y:0}); 
    return carousel_4way_Y(3, this, (transitionState == '-') ? '+' : '-'); 
    event.preventDefault(); 
}); 

$('#carousel-4way-nav-4').click(function(event){ 
    $(carousel_reset_nav).not(this).transition(
    {y:0}); 
    return carousel_4way_Z(4, this, (transitionState == '-') ? '+' : '-'); 
    event.preventDefault(); 
}); 

Answer 1

삼항 연산자는 좀 더 쉽게 읽을 :

transitionState_N = (transitionState_N == '-') ? '+' : '-'; 

귀하의 기능은 정말 반복합니다. 자주 반복하는 코드를 찾아서 대체 할 함수를 작성하십시오.

Answer 2

다음은 내가 수행 할 작업입니다. 하나는 이고, 모든 요소에 click() 함수를 할당 할 수 있습니다. 그런 다음 각 요소의 ID를 가져와 마지막자인 숫자를 추출 할 수 있습니다.

$('#carousel-4way-nav-1, #carousel-4way-nav-2,#carousel-4way-nav-3, #carousel-4way-nav-4').click(function(event){ 
    $(carousel_reset_nav).not(this).transition(
    {y:0}); 
    return carousel_4way(($(this).attr('id')).substring(this.length -1), this, (transitionState == '-') ? '+' : '-'); 
    event.preventDefault(); 
}); 

지금이 모든 같은 함수를 호출합니다

function carousel_4way(n, el, m) { 
    var carousel = '#carousel-4way-nav-' + n 
    var carousel_content = '#carousel-4way-' + n 
     switch(n){ 
      case 1: 
       transitionState_N = (transitionState_N == '-') ? '+' : '-'; 
      case 2: 
       transitionState_X = ... 
      ... 
     } 
    $(carousel_reset).hide(); 
    $(carousel).transition(
     {y: m + '=10',delay:200} 
    ); 
}; 

당신이 구문 작업을해야 할 수도 있습니다,하지만 당신은 당신은 HTTP에이 질문을 게시해야한다 일반적인 생각