Question

使用我的previous question的答案，我已经能够为任何给定的单个字符串成功创建“动画字母增量”。现在，我想使代码更具动态性，并使其适用于具有特定类的任何元素。要使用的“单词”的值设置为类中的任何文本。

问题：

如何循环遍历每个块类，抓取其中的文本以用作单词，运行字母增量功能并将它们全部增加到屏幕上，如original question？

HTML：

<span class="block">Hi</span>
<span class="block">Hey there</span>
<span class="block">There There</span>

JS：

$(document).ready(function() {

    $('.block').each(function () {

        function Letter(table, letter, duration) {
            this.table = table;
            this.letter = letter;
            this.current = 0;
            this.delay = duration / tbl.indexOf(letter);   // ms
            this.time = Date.now();
            this.done = false;
        }
        Letter.prototype.update = function() {
            if (this.done) return;
            var time = Date.now();
            if (time - this.time >= this.delay) {
                this.time = time;
                if (this.letter === this.table[this.current] || this.current === this.table.length) {
                    this.done = true;
                } else {
                  this.current++;
                }
            }
        };

        var word = $(this).html();
        console.log ('Word: ' + word);

        var tbl = " ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        var letters = [];
        word.toUpperCase().split("").forEach(function(l) {
            letters.push(new Letter(tbl, l, 2500))
        });

        (function loop() {
            var txt = "", isDone = true;
            letters.forEach(function(l) {
            l.update();
            if (!l.done) isDone = false;
            txt += l.table[l.current];
        });

        // output txt
        $(this).html(txt);

        if (!isDone) requestAnimationFrame(loop);
        else { /* done */ }
        })();

    });

});

当我在结尾处分配$（this）.html（txt）时，它会导致所有文本消失。

Original Snippet：

function Letter(table, letter, duration) {
  this.table = table;
  this.letter = letter;
  this.current = 0;
  this.delay = duration / tbl.indexOf(letter);   // ms
  this.time = Date.now();
  this.done = false;
}
Letter.prototype.update = function() {
  if (this.done) return;
  var time = Date.now();
  if (time - this.time >= this.delay) {
    this.time = time;
    if (this.letter === this.table[this.current] || 
        this.current === this.table.length) {
      this.done = true;
    }
    else {
      this.current++;
    }
  }
};

var word = "hello there";
var tbl = " ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var letters = [];
word.toUpperCase().split("").forEach(function(l) {
  letters.push(new Letter(tbl, l, 2500))
});

(function loop() {
  var txt = "", isDone = true;
  letters.forEach(function(l) {
    l.update();
    if (!l.done) isDone = false;
    txt += l.table[l.current];
  });

  // output txt
  d.innerHTML = txt;
  
  if (!isDone) requestAnimationFrame(loop);
  else { /* done */ }
})();

<!DOCTYPE html>
<html>
<head>
    <style>
        #d {font:bold 32px monospace}
    </style>
    <script src="/scripts/snippet-javascript-console.min.js"></script>
</head>
<body>
    <div id=d></div>
</body>
</html>

如何为某个类的每个元素运行此函数？

0 个答案: