2

私は、ユーザーが正しく入力されたテキストを入力すると、画像が文字を変更し、ユーザーに正しく入力されたことを知らせるスクリプトを開発してきました。

ここでプレビュー：例の単語は「食べた」です。 http://jsfiddle.net/wjx6b/2/

を使用してインデックスをチェックするように設定されていることを確認しました

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

私の問題は、日本語の「たべる」のような外国語に設定しようとすると、このようなvarテキストボックスのそれぞれに2文字が必要になることです。

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

しかし、それを設定すると、入力を開始しても何も起こりません。助けてくれる人に感謝します！

4

3 に答える 3

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 に答える
2

「型指定された」配列の値は 1 つずつアクセスされますが、テキスト配列では、文字をペアで 1 つの値として配置します。したがって、その場合、1文字を2文字の文字列と比較しています（「ta」と「t」、「be」と「a」、「ru」と「b」を比較します。もちろん、これは決して等しくなりません）。

これを考慮するには、'stepsize' を考慮する必要があります (つまり、画像がグループ化される文字数)。部分文字列を使用すると、サイズ 'stepsize' の入力されたテキスト ブロックをテキスト配列の値と比較できます。

作業用フィドル (ate now の代わりに aattee と入力する必要があります)

別のフィドル、ここで「たべる」と入力する必要があります

このフィドルのステップサイズは、テキスト配列の最初の項目に基づいています

このフィドルは、テキスト配列の値が同じ長さでない場合に備えて、ステップサイズを動的に検出します (提案については 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 に答える
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 に答える