Как я не могу повторить этот код в jquery?

Question

Я повторяю утверждение IF ELSE, например,

 $('#accountLoginButton').click(function() {




     if($('#topSubscribe').is(":visible")) {

         $('#topSubscribe').slideUp(function(){


            if ($('#topLogin').is(":hidden"))
            {
                 $('#topLogin').slideDown("fast");
            } else {
                 $('#topLogin').slideUp("fast");
            }

         });

     } else {

         if ($('#topLogin').is(":hidden"))
            {
                 $('#topLogin').slideDown("fast");
            } else {
                 $('#topLogin').slideUp("fast");
            }

     }




 });



 $('#subscribeTopButton').click(function() {

     if($('#topLogin').is(":visible")) {

         $('#topLogin').slideUp(function(){


            if ($('#topSubscribe').is(":hidden"))
            {
                 $('#topSubscribe').slideDown("fast");
            } else {
                 $('#topSubscribe').slideUp("fast");
            }

         });

     } else {

         if ($('#topSubscribe').is(":hidden"))
            {
                 $('#topSubscribe').slideDown("fast");
            } else {
                 $('#topSubscribe').slideUp("fast");
            }

     }


 });

В основном 2 кнопки работают как вкладки, чтобы показать / скрыть вещи.

Как видите, у меня буквально один и тот же код повторяется несколькими разными способами пару раз. У меня такое чувство, что я могу как-то объяснить это несколькими строками кода, но мое понимание JavaScript в целом немного неясное.

Как мне обрезать это больше всего?

Answer 1

Вы можете использовать slideToggle вместо проверки на видимость, а затем с помощью slideDown или slideUp.

Вы можете заменить:

if ($('#topLogin').is(":hidden"))
{
     $('#topLogin').slideDown("fast");
} else {
     $('#topLogin').slideUp("fast");
}

с:

$('#topLogin').slideToggle("fast");

Это должно позволить вам избавиться от большого количества повторений в вашем коде.

Answer 2

Вы можете попробовать что-то вроде этого:

function handleVisibilityOf( el, otherEl ) {
  if( el.is(':visible') ) {
    el.slideUp( function() {
      otherEl.slideToggle();
    } );
  }
  else {
    otherEl.slideToggle();
  }
}

$('#accountLoginButton').click( function() {
  handleVisibilityOf( $('#topSubscribe'), $('#topLogin') );
} );

$('#subscribeTopButton').click( function() {
  handleVisibilityOf( $('#topLogin'), $('#topSubscribe') );
} );

Answer 3

function slideBoth(elm1, elm2){
  if(elm1.is(":visible")){
    elm1.slideUp(function(){
      elm2.slideToggle("fast");
    }
  }else{
    elm2.slideToggle("fast");
  }
}


$('#accountLoginButton').click(function() {
  slideBoth($("#topSubscribe"), $("#topLogin"));
}



$('#subscribeTopButton').click(function() {
  slideBoth($("#topLogin"),$("#topSubscribe"));
}

Answer 4

Вы просто запускаете много кода внутри блока if. Попробуйте вместо этого:

$('#accountLoginButton').click(function() {
    if($('#topSubscribe').is(":visible")) {
        $('#topSubscribe').slideUp();
    }
    $('#topLogin').slideToggle('fast');
}

Или, как предложили несколько других, вы можете выделить повторяющийся код в отдельную функцию:

$('#accountLoginButton').click(function() {
    if($('#topSubscribe').is(":visible")) {
        $('#topSubscribe').slideUp(function(){
            $('#topLogin').slideToggle('fast');
        });
    } else {
        $('#topLogin').slideToggle('fast');
    }
});

РЕДАКТИРОВАТЬ: использование .slideToggle() вместо блока if.

Answer 5

Попробуйте изменить рефакторинг на более мелкие функции, тогда вы сможете легче увидеть дублирование.

Answer 6

Вы можете поместить этот кодовый блок в функцию и вызывать его в обоих местах по мере необходимости.