0

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

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

因此，当用户输入“na”时，第一个符号会突出显示，如您在我的示例中看到的那样。当他输入“ma”时，第二个符号应突出显示/翻转。我希望所有符号在输入正确文本时保持翻转。因此，如果用户键入“nama”，前两个符号应翻转以表明他们正确，一旦输入最后一个正确的文本，所有三个符号都将翻转。

这能做到吗？我会接受高级和简单的方法。

4

2 回答 2

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;
}
于 2012-05-04T15:54:58.677 回答
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');
            }
        });
    });
});

小提琴

编辑：

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

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

然后将代码包装在 document.ready 中，请参阅上面的编辑代码以了解如何做到这一点？

于 2012-05-04T16:27:41.767 回答