JQuery: короче код (если и вар)

Question

это, наверное, глупый вопрос, но у меня есть проблема не с кода не работает - это скорее код слишком долго ...

все работает нормально, но, например, есть ли способ сократить , если/else? или можно отследить 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() всем элементам. Затем вы можете получить идентификатор каждого элемента и извлечь последний символ, который является цифрой.

$('#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} 
    ); 
}; 

вам может понадобиться для работы на синтаксисе, но вы получите общее представление