javascript - 正确输入文本后，图像会亮起/变化

Question

我正在我的网站上建立一个语言学习部分。用户将看到单词でんき（日语单词）。当有人输入与每个符号匹配的正确文本时，其中一个会亮起。我怎么能做到这一点？

这是我网站的预览图片：http: //imageshack.us/photo/my-images/827/hiraganaquiz2.jpg/

Answer 1

这是一个带有普通输入字段的示例：

<script type="text/javascript">
var answer = 'foo';
function checkMatch(val) {
    if (val == answer) {
        alert('CORRECT!');
    }
}
</script>


<input type="text" id="word_box" value="" onkeyup="checkMatch(this.value)" />

这是非常简化的，但你明白了。每当在框或其他可编辑字段中按下键时，都会调用 onkeyup。

Answer 2

HTML

<div class="question">
    <span data-answer="correctAnswerOne">で&lt;/span>
    <span data-answer="correctAnswerTwo">ん&lt;/span>
    <span data-answer="correctAnswerThree">き&lt;/span>
<div>
<label for="answer">Enter your Answer</label>
<input id="answer" />

Javascript

//Build an array of correct answers
var answerArray = "";
var i = 0;
$('.question span').each( function() {
    answerArray[i] = this.attr('data-answer');
    i++;
} );

//On key up, get user input
$('input').keyup(function(){
    $('.question span').removeClass('highlight');
    var userInput = $('#inputElementID');
    var userInputArray = string.split(' ');//Split the string into an array based on spaces (I assume you are looking for three separate words
    var answerCount = array.length;
    for (i=0;answerCount >= i;i=i+1) {
        if (userInputArray[i] == answerArray[i]) {
            $('span[data-answer=' + answerArray[i] + ']').addClass('highlight');
        }
    }
});

CSS

.highlight{
    background-color:yellow;   
}

Answer 3

这是另一个要添加到组合中的内容。简短的回答是使用 Javascript、HTML 和 CSS 来完成此任务。

http://jsfiddle.net/BUxvx/1/

HTML

<span data-answer="cat" data-for="1">Symbol 1</span>
<span data-answer="dog" data-for="2">Symbol 2</span>
<span data-answer="chicken" data-for="3">Symbol 3</span>
<br />
<input type="text" data-for="1" />
<input type="text" data-for="2" />
<input type="text" data-for="3" />
< - Type answers here
<br />
<span>cat</span>
<span>dog</span>
<span>chicken</span>​

JavaScript

$('input').keyup(function(){
    $txt = $(this); 
    $span = $('span[data-for="' + $txt.attr('data-for') + '"]'); 
    if($(this).val() === $span.attr('data-answer')){
        $span.addClass('highlight'); 
    }else{
        $span.removeClass('highlight');        
    }
}); ​

CSS

span{
 display:inline-block;
 height:75px; 
 width:75px;   
 line-height:75px;
 text-align:center;
 border:1px solid black;    
}

input{
 width:75px;    
 border:1px solid black; 
}
.highlight{
 background-color:yellow;   
}
​

Answer 4

这是一个简单的方法：

<span data-value="Car">{character that means Car}</span>
<span data-value="Boat">{character that means Boat}</span>
<span data-value="Plane">{character that means Plane}</span>
<input>

$('input').keyup(function(){
    var val = $(this).val();
    $('[data-value]').removeClass('highlight');
    $('[data-value="'+val+'"]').addClass('highlight');
});

解释：

将data-value保存您角色的英文文本。当用户键入与其匹配的值时，它将将该highlight类添加到具有data-value匹配文本的所有元素中。只需将您的“点亮”风格应用于课堂。

演示：http: //jsfiddle.net/MTVtM/

要使用多个单词，只需split一个空格的值并检查每个部分：

$('input').keyup(function(){
    var val = $(this).val();
    $('[data-value]').removeClass('highlight');
    val.split(' ').forEach(function(v) {
      $('[data-value="'+v+'"]').addClass('highlight');
    });
});

演示： http: //jsfiddle.net/MTVtM/1/（尝试输入“Car Boat”）