当用户输入正确的文本时，图像翻转/更改 [英] When user enters correct text, an image rollovers/changes
问题描述
我正在设计一个语言学习网站。当有人在文本框中输入文本时，我想拥有它，它开始翻转某些图像。看看下面的示例
I am designing a language learning site. I want to have it when someone enters text into the text box it starts to roll over certain images. Take a look at my sample below
http://imageshack.us/photo/my-images/827/hiraganaquiz2.jpg/
因此，当用户输入 na你在我的样本中看到的第一个符号突出显示。当他输入ma时，第二个符号应突出显示/翻转。我希望所有符号在输入正确的文本时保持翻转状态。因此，如果用户输入nama，则前两个符号应该被翻转以显示它们是正确的，一旦输入了最后一个正确的文本，这三个符号将被翻转。
So, when the user enters "na" the first symbol highlights as you see in my sample. When he enters "ma" the second symbol should highlight/rollover. I want all the symbols to stay rolled over while the correct text is entered. so if the user types "nama" the first two symbols should be rolled over to show they got it correct and once the last correct text is entered all three will be rolled over.
这可以完成吗？我会接受先进而简单的方法。
Can this by done? I will accept advanced and simple methods.
推荐答案
$(document).ready(function() {
var text = ['na', 'ma', 'ba'];
$("#elemID").on('keyup', function() {
var typed = this.value;
$.each(text, function(index, item) {
if (typed.indexOf(item)!=-1) {
$('li', 'ul').eq(index).find('img').addClass('correct');
}else{
$('li', 'ul').eq(index).find('img').removeClass('correct');
}
});
});
});
编辑：
顶部您的网页，在< head> 部分，添加：
At the top of your page, in the <head> section, add:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
然后将代码包装在document.ready中，请参阅上面编辑过的代码，了解如何操作？
Then wrap the code in document.ready, see the edited code above on how to do that ?
这篇关于当用户输入正确的文本时，图像翻转/更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
