0

unwrongest で "Airport"のように動作するはずだった練習用の jQuery プラグインを作成しました。

操作方法の簡単な説明

  1. いくつかの要素のテキストを取得し、それを繰り返します。
  2. 見つかったすべての文字について、文字をアルファベットの各文字と比較して、アルファベットを反復処理します...
  3. ... text-char = alphabet-char まで (または「alphabet」配列に要素がなくなるまで。
  4. 比較しながら、実際のテキストを一定の遅延で変更します。

たとえば、hi でプラグインを使用すると、単語が hi (開始) から ai、bi、ci、[...]、ha、hb、hc、hd、[...]、hi、反転のようなものに変わります。それを通して。繰り返しますが、私の言いたいことがわからない場合は、リンクを確認してください。

問題

コンソールをfirebugでチェックすると、ターゲットテキストは変更されますが、最後に到達するまで更新されません。最初は何もしないと思っていましたが、コードを変更して各文字を「A」に変えると（例として）、テキストが最後に「AAAAAAAA」に更新されます。ただし、プラグインに必要なことは、もちろん、変更ごとに更新することです。

コード

(function( $ ){

  $.fn.myAirport = function() {
        var text = this.text();
        var length = text.length;
        var alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "!", "?"];
        var possibilities = alphabet.length;

        function changeCharAt(string, index, char) {
            var length = string.length;
            if(index > length-1) return string;

            var before = string.substr(0,index);
            var after = string.substr(index+1);
            result = before + char + after;
            return result;
        }



        for (var i = 0; i < length; i++) {
            var letter = text[i];
            console.log("looking for: "+letter);

            for (var j = 0; j < possibilities; j++) {
                var test = alphabet[j];
                if (letter == test) {
                    console.log("Done, "+letter+" (letter # "+i+") is # "+j+" in the Alphabet-string");
                    j = possibilities;
                }
                else {}

                text = changeCharAt(text, i, test);
                $(this).text(text).delay(100);              
                console.log("Trying "+$(this).text());
            }
        }
  };
})( jQuery );

プラグインは次のように呼び出されます。$("#element").myAirport();

4

1 に答える 1

0

ブラウザは、更新前に for ループが完了するまで待機する傾向があります。使用するのではなく

 $(this).text(text).delay(100)

setTimeout 関数を試してください。

Javascript ループ内で HTML 要素を再描画するにはどうすればよいですか?

于 2012-04-17T12:52:10.833 に答える