Question

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

http://imageshack.us/photo/my-images/827/hiraganaquiz2.jpg/

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

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

Answer 1

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

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

Answer 2

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

FIDDLE

修改

在页面顶部的<head>部分，添加：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

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

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

2 个答案: