我怎麼能不在jQuery中重複這段代碼？

我是在重複一個IF ELSE語句，像這樣我怎麼能不在jQuery中重複這段代碼？

$('#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的理解是一般有點陰暗。

我該如何修剪這個最多？

來源

2009-11-09 willdanceforfun

沒有效果基本show的原型，需要一個功能作爲第一個參數，請參閱：http://docs.jquery.com/Effects/slideUp - 保存你問你的下一個問題！ :) – 2009-11-09 13:28:58

您可以使用slideToggle而不是檢查可見性，然後使用slideDown或slideUp。

您可以更換：

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

有：

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

這應該讓你擺脫你的代碼有很多重複的。

來源

2009-11-09 13:25:29 michaelk

它不會真的刪除重複，但它會減少代碼行數=） – 2009-11-09 13:28:07

有一個slideToggle？我現在感到很蹩腳 – willdanceforfun 2009-11-09 13:32:15

是的，代碼中的邏輯無論如何是有缺陷的。我喜歡你的解決方案。 – michaelk 2009-11-09 13:32:28

您可以將該代碼塊放入函數中，並根據需要在兩個位置調用它。

來源

2009-11-09 13:21:01 Sundeep

嘗試將其重構爲較小的函數，然後您應該能夠更輕鬆地看到重複。

來源

2009-11-09 13:21:34

你只是在你的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塊來代替。

來源

2009-11-09 13:27:34

你可以嘗試這樣的事：

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

來源

2009-11-09 13:29:29 rfunduk

謝謝@bobince，這裏早上太早了，也許:) – rfunduk 2009-11-09 13:49:47

這太棒了。我在研究它！ – willdanceforfun 2009-11-09 23:31:22

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

來源

2009-11-09 13:33:48 Marius

我怎麼能不在jQuery中重複這段代碼？

回答

相關問題