jQuery指定したもの以外のキーが押されたときにkeypress（）を呼び出す方法

Question

入力時に文字を赤に変えて文字を取得しようとしています。しかし、誰かがその単語の間違った文字を入力すると、前の文字が色を失うようにしたい。

<p>Type the <span id="k">k</span><span id="a">a</span><span id="t">t</span> keys on your keyboard to change the letters red.</p> 

この例では、単語は「kat」です。私はそれを入力すると、各文字が赤に変わります。しかし、 "ka"の後に "t"以外のキーを押すと "k"と "a"から "red"クラスが削除されます。これは可能ですか？

$(document).keypress(function(e) { 
    switch(e.which) { 
     case 107: $("#k").addClass('red'); 
    } 

    if ($("#k").hasClass("red")) { 
     switch(e.which) { 
      case 97: $("#a").addClass('red'); 
     } 
    } 

    if ($("#a").hasClass("red")) { 
     switch(e.which) { 
      case 116: $("#t").addClass('red'); 
     } 
    } 
}); 

Answer 1

ライブデモ：http://jsfiddle.net/fZrwE/3/

HTML：

<span id="word"> 
    <span>H</span> 
    <span>e</span> 
    <span>l</span> 
    <span>l</span> 
    <span>o</span> 
</span> 

はJavaScript：

$(document).keypress(function(e) { 
    var p = 'pressed', 
     s = $('#word > span'), 
     l = s.not('.' + p).first(), 
     c = l.text().charCodeAt(0); 

    e.which == c ? l.addClass(p) : s.removeClass(p); 
}); 

説明：

キー押下ハンドラが4のローカル変数があります
pを押下文字、
sのクラス名は
l、文字（#word素子内部SPAN要素）のjQueryのコレクションであるsから第SPANありますまだ押されていないpクラスのergoはありません。これは次に押さなければならない文字であることに注意してください。
cはその文字のコードです。

e.which（ユーザにより押下された文字のコード）はcと同じである場合、それは、ユーザが正しい文字を押したことを意味し、この手紙 - lを介して参照されている - 受信しますpクラス。それ以外の場合は、単語全体をリセットして、すべての文字からpクラスを削除してください。