Question

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

示例：例如，单词“ate”。

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

是否有可能使其与某些正确的文本保持一致？

JSFIDDLE这里有谷歌图片，例如：

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

P.S。我希望我解释清楚的事情！我已经在这里工作了几个小时，我可以伸出援助之手。非常感谢你们！

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/

正确输入文字更改图像？

1 个答案: