0

我编写了一个 jQuery 插件用于练习，它应该像unwrongest 的“Airport”一样工作。

对它应该如何操作的简短描述

  1. 获取某个元素的文本，遍历它。
  2. 对于找到的每个字符，遍历字母表，将字符与字母表中的每个字符进行比较...
  3. ...直到 text-char = alphabet-char （或直到“字母”-数组没有更多元素。
  4. 在比较时，以一定的延迟更改实际文本。

因此，例如，在 hi 上使用插件会将单词从 hi（开始）更改为 ai、bi、ci、[...]、ha、hb、hc、hd、[...]、hi，有点翻转通过这。同样，如果您不知道我的意思，您可以查看链接。

问题

用 firebug 检查控制台，它确实改变了目标文本，但它直到它到达 end 才更新。首先我认为它根本没有做任何事情，但是当我更改代码以将每个字符转换为“A”（例如）时，它会在最后将文本更新为“AAAAAAA”。不过，我需要插件做的当然是在每次更改后更新它。

编码

(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 回答