Javascript 正确输入的文本更改图像？

我试图实现一种效果，即正确输入的文本将导致图像更改，让用户知道他输入的文本是正确的。我遇到的唯一问题是，如果用户正确键入前两个字符，即使第三个字符不正确，它仍会保持不变

例如：以单词“ate”为例

如果用户输入带有两个A的“aate”，图像仍保持高亮显示/更改

是否有可能使它以某种方式精确到正确的文本需要的内容

JSFIDDLE在这里以谷歌图片为例：

---

p、 我希望我能把事情解释清楚！我已经为此站了好几个小时了，我需要帮助。非常感谢各位

您需要的是检查索引

$("#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]);
        }
    });
});

或者，精确匹配需要将当前文本与组合的数组字母进行比较

$("#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]);
        }
    });
});

$（“#测试”）.on（'keyup'，function（）{
var typed=this.value；
var theWord=''
对于（i=0；i您需要的是检查索引

$("#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]);
        }
    });
});


或者，精确匹配需要将当前文本与组合的数组字母进行比较

$("#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]);
        }
    });
});

$（“#测试”）.on（'keyup'，function（）{
var typed=this.value；
var theWord=''
例如（i=0；iI在您的特定示例中，如果输入中的文本与这些特定字符匹配，则“a”、“e”和“t”的图像将突出显示，因此我猜它的行为是正确的。为什么不使用对象，如
{a:'url'，b:'url'，…}
，然后使用字母获取url？在您的特定示例中，使用“a”、“e”和“t”的图像如果输入中的文本与这些特定字符匹配，就会突出显示，因此我猜它的行为是正确的。为什么不使用对象，比如
{a:'url'，b:'url'，…}呢
，然后用这封信获取url？这太完美了！我也理解你所做的。非常感谢你教我这个！非常感谢。祝你有一个美好的一天！这太完美了！我也理解你所做的。非常感谢你教我这个！非常感谢。祝你有一个美好的一天！