1

私はjQueryに非常に慣れていないので、助けが必要です:

私が探しているもの: 人が正しい答えをテキストボックスに入力したときに div を表示させたいです。彼らが間違った答えを得ると、別の div が表示されます。

私が今持っているもの: 現在、私は Javascript を使用して、人の回答に応じて 2 つの異なるテキストを出力しています。現在の様子をご覧ください: http://yankrupnik.com/wowza/cats.html

これはそのテストページのhtmlです

<!DOCTYPE html>
    <html>
        <head>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
            <script type="text/javascript"> 
                $(document).ready(function(){
                    $("button#start").click(function(){
                        $("div#catbox").animate({height:336},1000);
                        $("div#catbox").animate({width:480},1000);
                        $("div#catbox").animate({height:100},700);
                        $("div#catbox").animate({width:100},500);
                        $("div#catbox").hide(2000);
                        $(this).hide();
                    });
                }); 
            </script> 
        </head>
    <body>
        <div align="center">
            <h3>The Cat Test</h3>
            <p>Click "start" and count how many cats you see! Enter your estimation below, and if you've got it, collect a cookie!</p>
            <button id="start">START!</button>
            <br /><br />
                <div id="catbox" style="background:#98bf21;height:100px;width:100px;overflow:hidden">
                <img src="images/manycats.jpg">
                </div>


            <p>So, how many cats did you manage to spot?</p> <input id="cats" value="enter number here" onfocus="this.value='';" />
            <button onclick="valFunction () ">Submit Answer!</button>

            <p id="demo"></p>

            <script type="text/javascript">
            function valFunction()
                {
                cats=document.getElementById("cats").value;
                validation=(cats==7)?"Nice! You've Got it!":"Sorry... press [F5] and try again!";
                document.getElementById("demo").innerHTML=validation;
                }
            </script>     
        </div>
    </body>
    </html>

事前にご協力いただきありがとうございます。

4

1 に答える 1

0

を使用.show()して表示しdivます。私は、それらが最初は次のように隠されていると仮定していますdisplay: none:

if (answer == correctAnswer) {
  $("#id_of_correct_answer_div").show();
} else {
  $("#id_of_wrong_answer_div").show();
}
于 2012-08-30T02:26:10.543 に答える