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

您可以将该代码块放入函数中，并根据需要在两个位置调用它。

Answer 4

尝试将其重构为较小的函数，然后您应该能够更轻松地看到重复。

Answer 5

您只是在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 6

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

我怎么能不在jquery中重复这段代码？

6 个答案: