当文本框值与另一个div的内容相同时显示div

时间:2013-04-11 11:55:13

标签: javascript html show

我正在进行一个测验,答案是随机的。我想要“正确!” div表示文本框值与另一个div相同的时间。

这是我到目前为止所得到的:

$(document).ready(function(){
    $("#buttontest").click(function(){
        if ($('#full_day').val() == '#answer') {   
            $("#correct").show("fast"); //Slide Down Effect
        } 
        else {
            $("#correct").hide("fast");    //Slide Up Effect
            $("#incorrect").show("500").delay("1000").hide("500");
        }
    });
});
<p>What is the animal?</p>
<div id="correct">
    That's Correct!
</div>
<div id="incorrect">
    Sorry, Try again!
</div>
<div id="answer">Monkey</div>
<input type='text' id="full_day"/>
<input type='button' id="buttontest" value="clickme"/>

3 个答案:

答案 0 :(得分:3)

使用

$('#answer').text()

而不仅仅是

'#answer'
if语句中的

答案 1 :(得分:1)

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

        if ($('#full_day').val() == $('#answer').html()) {   
            $("#correct").show("fast"); //Slide Down Effect
        } 
        else {
            $("#correct").hide("fast");    //Slide Up Effect
            $("#incorrect").show("500").delay("1000").hide("500");
        }
    });
});

<p>What is the animal?</p>
<div id="correct" style="display:none;">
    That's Correct!
</div>
<div id="incorrect" style="display:none;">
    Sorry, Try again!
</div>
<div id="answer" style="display:none;">Monkey</div>
<input type='text' id="full_day"/>
<input type='button' id="buttontest" value="clickme"/>

答案 2 :(得分:1)

if ($('#full_day').val() == $('#answer').text())

这是区分大小写的。使其不区分大小写:

if ($('#full_day').val().toLowerCase() == $('#answer').text().toLowerCase())

编辑:根据要求,这是一个允许多个答案的解决方案:

$('#check').bind('click', function() {
    var possibleAnswers = $('#answers').text().toLowerCase().split(' ');
    var givenAnswer = $('#user-answer').val().toLowerCase();
    var isAnswerCorrect = false;
    for (var indexPossibleAnswers = 0; indexPossibleAnswers < possibleAnswers.length; indexPossibleAnswers++)
    {
         if (possibleAnswers[indexPossibleAnswers] == givenAnswer)
         {
              isAnswerCorrect = true  
              break;
         }
    }
    if (isAnswerCorrect)
    {
         alert('Correct');   
    }
    else 
    {
         alert('Incorrect, try again.');   
    }
});

Live demonstration.