0

質問を1つだけ使って簡単なクイズを作ろうとしています。正解を入力すると「正解」のメッセージが表示される段階になりました。問題は、「不正解」のメッセージも表示したいということです。入力フィールドに他に何か入力すると、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

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

フィドルの例

于 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 を表示する前に div を非表示にする必要があります。

于 2012-10-22T21:46:34.150 に答える