0

語学学習サイトをデザインしています。誰かがテキストボックスにテキストを入力すると、特定の画像がロールオーバーし始めます。以下の私のサンプルを見てください

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

したがって、ユーザーが「na」と入力すると、私のサンプルに示されているように、最初の記号が強調表示されます。彼が「ma」と入力すると、2番目の記号が強調表示/ロールオーバーするはずです。正しいテキストが入力されている間、すべての記号をロールオーバーしたままにします。したがって、ユーザーが「nama」と入力した場合、最初の2つの記号をロールオーバーして、正しいことを示し、最後の正しいテキストを入力すると、3つすべてがロールオーバーされます。

これはできますか？高度でシンプルな方法を受け入れます。

4

2 に答える 2

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 に答える
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 に答える