Question

我的代码有一个名为'answer_textbox'的文本框。当用户在文本框中输入答案并按回车键时，应该会发生一些jQuery代码。首先，我不知道如何有多个if条件。它们应该是这样的吗？

if($('#answer_textbox').val() == 4 && 'four') {

在执行该代码之后，如果有一个弹出的警告框是用户为答案拼写'for'而不是'4'，则我有一个else。

if($('#answer_textbox').val() == 'for') {
    alert('FOUR you moron');
}

但这仅适用于用户拼写'for'而不拼写空格后的情况。就像他们拼写'for'并在其后面放一个空格一样，它就行不通。我该如何解决？

Answer 1

您可以检查值中单词的索引：检查单词“for”是否存在于值中：

if($('#answer_textbox').val().indexOf('for') >= 0) {

您还可以修剪值的空格，然后完全匹配：

if($('#answer_textbox').val().trim() == 'for') {

....并且不区分大小写：

if($('#answer_textbox').val().trim().toLowerCase() == 'for') {

您还可以查看最接近的匹配项。在此处阅读更多内容：Getting the closest string match

然后关于你的多个if。它不是很好。你为什么这么做呢？

if (condition)
{

}
else if (condition)
{

}
else if (condition)
{

}
else
{

}

不太可维护。另一种方法是使用开关：

switch (field)
{
   case: 'for':
      // add your logic
   break;

   case 'other':
      // add your logic
   break;

   default:
      // logic for default
}

Answer 2

简短的回答是，您可以将所有答案存储为小写，然后执行$(selector).val().toString().toLowerCase().trim();以获取用户输入的修剪小写值

然而，你可以让整件事情比你拥有的更简单。

我会做类似下面的事情。使用此方法，添加或删除问题是微不足道的，只需将问题和答案添加到数组中：

// create a multidimensional array of your questions and answers
// answers should be in lowercase to make things easier later
var questions=[ 
    ['What color is the sky?','blue'],
    ['What color is the ocean?','blue'],
    ['What comes after C?','d'],
    ['What comes after 9?','10']
    ];
// loop through the array and add an input and text for each to the page   
$.each(questions,function(index,element){
    $('#container').append('<input type="text" class="answer"> '+ element[0]+'<br>')
});
// when a user presses enter in one of the inputs, check the answer
$('#container input').on('keydown', function(e){
    if(e.which == 13) { // enter was pressed
       var question = $('.answer').index($(this)); // get the index of the current input
       var answer = $(this).val().toString().toLowerCase().trim(); // get the typed answer
       var correct =  questions[question][1]; // get the correct answer for this question
        if(answer==correct){
            $(this).removeClass('incorrect');
            $(this).addClass('correct'); // mark correct
        }
        else{
            $(this).removeClass('correct');
            $(this).addClass('incorrect'); // mark incorrect
            $('#result').html(correct+' you moron'); // funny message
            setTimeout(function(){ $('#result').html('') }, 2000); // remove message after a few seconds
        }
    }
});

.correct{
    background-color:#99FF99;   
}
.incorrect{
    background-color:#FF6666; 
}
#result{
    color:#FF0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">
</div>
<div id="container">
</div>

多种IF条件

2 个答案: