正确输入的文本会更改图像

Correctly entered text changes image?

本文关键字：图像 文本 输入      更新时间：2023-09-26

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

例如：以"吃"这个词为例。

如果用户键入带有两个A的"aate"，则图像仍会高亮显示/更改。

是否有可能以某种方式使其与正确文本所需的内容保持一致？

这里的JSFIDDLE与谷歌图像例如：

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

我希望我把事情解释清楚！我已经起床做了好几个小时了，我需要帮助。非常感谢大家！

您需要的是检查索引

$("#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/​

相关文章：