当用户输入正确的文本时，图像翻转/更改

我正在设计一个语言学习网站。 当有人在文本框中输入文本时，我想拥有它，它开始滚动某些图像。 看看下面的示例

http://sofzh.miximages.com/javascript//

因此，当用户输入“na”时，第一个符号突出显示在我的样本中。 当他输入“ma”时，第二个符号应突出显示/翻转。 我希望在输入正确的文本时，所有符号都会保持滚动状态。 因此，如果用户键入“nama”，则应滚动前两个符号以显示它们是正确的，一旦输入了最后一个正确的文本，所有三个符号都将被翻转。

可以这样做吗？ 我会接受先进而简单的方法。

Answer 1

$(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'); } }); }); }); 

小提琴

编辑：

在页面顶部的部分中，添加：

然后将代码包装在document.ready中，请参阅上面编辑的代码，了解如何执行此操作？

Answer 2

在更改输入框时，您可以执行以下操作:(完全未经测试）

 var parts = ["na", "ma", "blah"]; var start = 0; for (var i = 0; i < parts.length; i++) { var currentPart = parts[i]; var $img = $(".images img:nth-child(" + i + ")"); var end = start + currentPart.length; if (str.length >= end && str.slice(start, start + currentPart.length) == currentPart) { $img.addClass("highlight"); } else { $img.removeClass("highlight"); } start += currentPart.length; }