2

我一直在开发一个脚本，当用户输入正确输入的文本时，图像会改变字母，让用户知道他们输入正确。

在此处预览：示例词是“吃”。 http://jsfiddle.net/wjx6b/2/

我确保它被设置为使用检查索引

$.each(text, function(index, item)

我的问题是当我尝试将其设置为日语“taberu”之类的外来词时，我必须在每个 var 文本框中都有两个字母，像这样

var text = ['ta', 'be', 'ru'];

但是当我设置它时，当我开始打字时没有任何反应。感谢任何能提供帮助的人！

4

3 回答 3

2

'typed' 数组中的值被一一访问，而在文本数组中，您将字符成对地作为一个值。因此，在这种情况下，您将一个字符与两个字符串进行比较（将“ta”与“t”、“be”与“a”、“ru”与“b”进行比较。当然，这永远不会相等）。

要考虑到这一点，您必须考虑“步长”（即图像分组的字符数）。然后，您可以使用 substring 将大小为“stepsize”的键入文本块与文本数组中的值进行比较。

工作小提琴（你必须输入 aattee 而不是现在吃）

另一个小提琴，在这里你必须输入'taberu'

在这个小提琴 stepsize 是基于文本数组的第一项

如果文本数组中的值的长度不同，这个小提琴会动态检测步长（感谢 haynar 的建议）

更新：这是最后一个示例的代码（感谢 Bob）：

var text = ['ta', 'ber', 'u'];

var happy = ['http://www.vendian.org/howbig/UnstableURLs/letter_a_poster.png',
         'http://chineseknotting.org/projects/knotty/T-carrick.jpg',
         'http://etc.usf.edu/presentations/extras/letters/varsity_letters/38/17/E-400.png'
        ];

var grumpy = $('img').map(function(){ return this.src; }).get(); //gets the original images from the HTML

$("#test").on('keyup', function() {
    var typed = this.value;
    var textOffset = 0;
    $.each(text, function(index, item) {
        var stepsize = text[index].length;
        if (typed.substring(textOffset, textOffset+stepsize) == text[index]) {
            $('li', 'ul').eq(index).find('img').attr('src', happy[index]);
        }else{
            $('li', 'ul').eq(index).find('img').attr('src', grumpy[index]);
        }

        textOffset += stepsize;
    });
});
于 2012-09-10T12:13:11.153 回答
2

这是适用于所有情况的 Fiddle 示例，不使用固定的元素大小，它取决于集合中每个元素的大小

var text = ['ta', 't', 'a', 'be', 'ru'];
var offset = 0;
var index = 0;

var happy = ['http://www.vendian.org/howbig/UnstableURLs/letter_a_poster.png',
             'http://chineseknotting.org/projects/knotty/T-carrick.jpg',
             'http://etc.usf.edu/presentations/extras/letters/varsity_letters/38/17/E-400.png',
             'http://chineseknotting.org/projects/knotty/T-carrick.jpg',
             'http://etc.usf.edu/presentations/extras/letters/varsity_letters/38/17/E-400.png'];

var grumpy = $('img').map(function(){ return this.src; }).get(); //gets the original images from the HTML

$("#test").on('keyup', function() {
    var typed = this.value;
    if (typed.substr(offset, text[index].length) == text[index]) {
        $('li', 'ul').eq(index).find('img').attr('src', happy[index]);
        offset += text[index].length;
        index++;
    }else{
        $('li', 'ul').eq(index).find('img').attr('src', grumpy[index]);
    }
});

我已经更新了脚本的逻辑，更新的版本可以在这里找到（感谢 Internal Server Error）​</p>

于 2012-09-10T12:18:16.227 回答
1

我喜欢的另一种方法是使用正则表达式。

从数组创建一个正则表达式：

var text = ['ta', 'ber', 'u'];
var regex = new RegExp('^' + $.map(text, function(val, i){ return '(.{'+val.length+'})?'; }).join(''),'i');

并匹配：

$("#test").on('keyup', function() {
    matches = $(this).val().match(regex);
    matches.shift();
    $.each(text, function(index, val){        
        if(val == matches[index]){
            $('li', 'ul').eq(index).find('img').attr('src', happy[index]);
        } 
        else {
            $('li', 'ul').eq(index).find('img').attr('src', grumpy[index]);
        }
    });
});
​

演示

于 2012-09-10T12:41:29.283 回答