Rozwijałem skrypt, że gdy typy użytkowników w poprawnie wprowadzonym tekście obrazy zmieni się literę, pozwalając użytkownikowi wiedzieć, że weszli prawidłowo.

Podgląd tutaj: Przykładowe słowo to "jadło". http://jsfiddle.net/wjx6b/2/

Upewniłem się, że sprawdził indeks, używając

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

Mój problem polega na tym, kiedy próbuję ustawić go do zagranicznego słowa, takiego jak "Taberu", który jest Japończykiem, muszę mieć dwie litery w każdym z pól tekstowych w Var

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

Ale kiedy to ustawię, nic się nie dzieje, gdy zaczynam pisać. Dziękuję każdemu kto może pomóc!

2
Miura-shi 10 wrzesień 2012, 16:04

3 odpowiedzi

Najlepsza odpowiedź

Wartości w tablicy "wpisanej" są dostępne jeden po drugim, podczas gdy w tablicy tekstowej umieszczasz znaki parami jako jedną wartość. W takim przypadku porównujesz jedną postać do dwuosobowego łańcucha postaci (porównując "TA" do "T", "Bądź" na "A", "Ru" do "B". Który nigdy nie będzie równy oczywiście).

Aby rozliczyć, że musisz wziąć pod uwagę "stickize" (to znaczy, w tym, ile znaków są pogrupowane). Korzystanie z podciążenia Możesz następnie porównać wpisane bloki tekstowe o rozmiarze "stwierdza" do wartości z tablicy tekstowej.

Pracująca skrzypce (musisz wpisać Aattee zamiast Ate teraz)

Kolejne skrzypce, tutaj musisz wpisać "Taberu"

W tym skrzypiec się stickize jest oparty na pierwszym elemencie tablicy tekstowej

Ta skrzypca dynamicznie wykrywa stoknie w przypadku, gdy wartości w tablicy tekstowej nie mają tej samej długości (dzięki Haynarar dla sugestii)

Aktualizacja: Jest to kod ostatniego przykładu (dzięki 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;
    });
});
2
Asciiom 10 wrzesień 2012, 12:23

Oto jest robotnikowym przykładem dla wszystkich przypadków, nie stosując stałego rozmiaru elementu, zależy to od wielkości każdy element w zestawie

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]);
    }
});

Zaktualizowałem logikę skryptu, zaktualizowana wersja można znaleźć Oto (dzięki wewnętrznym serwerze Błąd) Kąt

2
haynar 10 wrzesień 2012, 12:37

Alternatywa, którą lubię, jest z wykorzystaniem wyrażeń regularnych.

Utwórz regex z tablicy:

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

I dopasować:

$("#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]);
        }
    });
});
​

próbny

1
Ties 10 wrzesień 2012, 12:41