0

我正在尝试只用一个问题进行简单的测验，我已经到了如果输入正确答案然后显示“正确”消息的阶段，我的问题是我还想要显示“不正确”消息如果在输入字段中键入任何其他内容，则持续 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
    }
});


});​
4

3 回答 3

2

只需添加一行即可使其变得简单。在你的其他：

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

示例小提琴

于 2012-10-22T21:47:16.807 回答
0

您可以只使用一个 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
    });
});​

小提琴

于 2012-10-22T21:45:36.077 回答
-1 
$(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！

于 2012-10-22T21:46:34.150 回答