1

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

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

如果用户键入带有两个 A 的“aate”，则图像仍保持突出显示/更改。

是否有可能让它以某种方式与正确的文本保持一致？

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

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

ps我希望我解释清楚！我已经起床了好几个小时了，我可以伸出援助之手。非常感谢你们！

4

1 回答 1

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/ ​</p>

于 2012-08-25T17:04:58.783 回答