javascript - 正确输入的文字会改变图像吗？

Question

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

示例:以单词“ate”为例。

如果用户输入带有两个 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/ ​