根據輸入字段顯示hide div

Question

我想用一個問題進行一個簡單的測驗， 我已經進入階段，如果輸入正確的答案然後顯示「正確」的消息，我的問題是我也希望有一個「不正確的」消息顯示1秒，然後淡出，如果在輸入字段中輸入了其他內容。

我真的不知道如何讓這兩種功能的情況發生，這裏是我迄今爲止

http://jsfiddle.net/bloodygeese/3XGGn/36/

<p>What is 10 x 2 ?</p> 
<div id="correct"> 
That's Correct! 
</div> 
<div id="incorrect"> 
Sorry, Try again! 
</div> 
<input type='text' id="full_day"/> 
<input type='button' id="buttontest" value="clickme"/>​ 



$(document).ready(function(){ 
$("#buttontest").click(function(){ 

    if ($('#full_day').val() == 20) { 

     $("#correct").show("fast"); //Slide Down Effect 
    } 
    else { 
     $("#correct").hide("fast"); //Slide Up Effect 
    } 
}); 


});​ 

Answer 1

只需添加一行即可。在您的其他：

else { 
    $("#incorrect").show("500").delay("1000").hide("500"); 
} 

例如：http://jsfiddle.net/3XGGn/39/

編輯：

我看你已經接受了答案，所以應該是令人滿意的，但是，我現在發現我誤解你的問題。

[..]「不正確」的消息顯示1秒鐘，然後淡出，如果輸入字段中輸入了其他內容。

無論輸入字段中是否輸入了任何內容，我給你的東西都會消失。我會爲您提供實際要求的代碼，並且您可以選擇要使用的代碼。

$("#buttontest").click(function(){ 

    if ($('#full_day').val() == 20) { 

     $("#correct").show("fast"); //Slide Down Effect 
    } 
    else { 
     $("#correct").hide("fast"); //Slide Up Effect 
     $("#incorrect").show("500"); 
    } 
}); 
$("#full_day").change(function() { 
    $("#incorrect").hide("500"); 
}); 

Example fiddle

Answer 2

你可以只使用一個DIV，只是改變HTML

$(document).ready(function(){ 
    $("#buttontest").click(function(){ 
     var html = 'That\'s Correct!' ; 
     if ($('#full_day').val() != 20) { 
      html = 'Sorry, Try again!' ; 
     } 
     $("#correct").html(html).show("fast"); //Slide Down Effect 
    }); 
});​ 

FIDDLE

Answer 3

$(document).ready(function(){ 
$("#buttontest").click(function(){ 

    if ($('#full_day').val() == 20) { 

     $("#incorrect").hide("fast"); 
     $("#correct").show("fast"); 

    } 
    else { 
     $("#correct").hide("fast"); 
     $("#incorrect").show("fast"); 
    } 
}); 


});​ 

這應該可以解決你的問題，你必須在顯示下一個之前隱藏div！