jQuery按鈕點擊只能工作一次

Question

我想使用jQuery隱藏和顯示按鈕單擊上的元素。我有以下代碼：

$(function(){ 
    $('#link-form').hide() 
    $('#link-submit').hide() 

    $('#main-header-submit').on("click", function() { 
    $('#link-form').show(); 
    $('#main-yield').fadeTo("fast", 0.2) 
    $(this).on("click", function() { 
     $('#link-form').hide() 
     $('#main-yield').fadeTo("fast", 1) 
    }) 
    }) 
}) 

這成功地表明，當我點擊'main-header-submit'按鈕隱藏的div，但是當我點擊該按鈕（實際上第三次），使要素再次顯示沒有任何反應。任何幫助非常感謝。

Answer 1

如果你重寫你這樣的代碼，它應該工作：

$(function(){ 
    $('#main-header-submit').on("click", function() { 
    $('#link-form').toggle("fast"); 
    }) 
}) 

的toggle函數隱藏的元素，如果顯示的話，並顯示他們，如果他們是隱。請點擊這裏http://api.jquery.com/toggle/

Answer 2

使用toggle()和fadeToggle

$('#main-header-submit').on("click", function() { 
    $('#link-form').toggle(); 
    $('#main-yield').fadeToggle("fast") 
}) 

Answer 3

問題是因爲您在每次連續點擊時都附加了另一個click處理程序。第一個顯示link-form，而第二個隱藏它。這就是爲什麼你永遠不會看到任何改變。

從我所看到的代碼中，爲了實現您的要求，只需使用toggle()和fadeTo()代替三元代碼即可。試試這個：

$('#main-header-submit').on("click", function() { 
    $('#link-form').toggle(); 
    $('#main-yield').fadeTo("fast", $('#main-yield').css('opacity') == '1' ? 0.2 : 1); 
}); 

Working example

Answer 4

從本質上講，使用$("selector").on('click', function() { ... });將在該元素的點擊事件運行...。

在...函數定義中，您用另一個函數覆蓋.on('click')。

換句話說，第一次點擊時，您告訴代碼顯示您的元素，然後重新綁定點擊以隱藏。因此，隨後的每次點擊都會隱藏已經隱藏的元素。

你需要做的是這樣的：

$('#main-header-submit').on("click", function() { 
    if ($(this).is(":visible")){ 
    $('#link-form').hide() 
    $('#main-yield').fadeTo("fast", 1) 
    } 
    else{ 
    $('#link-form').show(); 
    $('#main-yield').fadeTo("fast", 0.2) 
    } 
});