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！

show hide div基于输入字段

3 个答案: