0

それはおそらくばかげた質問ですが、コードが機能しないという問題があります-それはむしろコードが長すぎるということです...

すべてが正常に機能しますが、たとえば、if / elseを短縮する方法はありますか？または、4つの異なる変数を追跡することは可能ですが、コードは短くなりますか？

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();
});
4

2 に答える 2

2

三項演算子を使用すると、多少読みやすくなります。

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

あなたの機能は本当に反復的です。頻繁に繰り返すコードを探し、それを置き換える関数を記述します。

于 2013-02-12T20:45:57.270 に答える
0

1 つには、すべての要素に 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}
     );
};

構文に取り組む必要があるかもしれませんが、一般的な考え方は理解できます

于 2013-02-12T21:30:42.587 に答える