正确输入文本后，图像会亮起/更改

When text is entered correctly, image lights up/changes

本文关键字：更改 图像 输入 文本      更新时间：2023-09-26

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

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

下面是一个具有普通输入字段的示例：

<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。

这是另一个要添加到组合中。简短的回答是使用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;   
}
​

HTML

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

爪哇语

//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;   
}

这是一个简单的方法：

<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/（尝试输入"汽车船"）

相关文章：