正確輸入文字更改圖片？

Question

我試圖達到正確輸入的文本會導致圖像更改，讓用戶知道他正確輸入它的效果。我遇到的唯一問題是，如果該人正確鍵入前兩個字符，即使第三個字符不正確，它仍然保持更改。

例如：以「吃」這個詞爲例。

如果用戶使用兩個A鍵入「aate」，圖像仍然保持突出顯示/更改。

是否有可能讓它保持精確到正確的文本需要是什麼？

的jsfiddle這裏與谷歌的圖像，例如：

http://jsfiddle.net/japaneselanguagefriend/wjx6b/

附：我希望我解釋清楚！我一直在這裏待上好幾個小時，我可以用一隻助手。非常感謝你們！

Answer 1

你需要做的是檢查索引

$("#test").on('keyup', function() { 
    var typed = this.value; 
    $.each(text, function(index, item) { 
     if (typed[index] == text[index]) { 
      $('li', 'ul').eq(index).find('img').attr('src', happy[index]); 
     }else{ 
      $('li', 'ul').eq(index).find('img').attr('src', grumpy[index]); 
     } 
    }); 
}); 

http://jsfiddle.net/wjx6b/2/

匹配或完全匹配將需要比較數組字母組成的當前文本

$("#test").on('keyup', function() { 
    var typed = this.value; 
    var theWord = '' 
    for(i=0;i<typed.length;i++){ 
     theWord += text[i]; 
    } 
    $.each(text, function(index, item) {    
     if (typed[index] == text[index] && typed == theWord) { 
      $('li', 'ul').eq(index).find('img').attr('src', happy[index]); 
     }else{ 
      $('li', 'ul').eq(index).find('img').attr('src', grumpy[index]); 
     } 
    }); 
}); 

http://jsfiddle.net/wjx6b/4/