Доступ к этому классу с использованием каждой функции

Question

У меня есть код, который увеличивает каждую букву заданного слова, начиная с буквы «А», до тех пор, пока не достигнет буквы адресата. Вы можете увидеть пример в фрагменте кода ниже. Код работает, когда я нацелен на один идентификатор div, но я хочу сделать его таким образом, чтобы он применял этот приращающийся текстовый эффект к каждому блоку текста с присвоенным ему классу «block».

$(document).ready(function() { 

    console.log("ready!"); 

    $('.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)) 
     console.log(l); 
    }); 

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

     // output txt 
     //$("div#d").html(txt); 
     $(this).parent('.block').html(txt); 

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

    }); 

}); 

Я пытаюсь вывести увеличивающийся эффект на каждый текстовый бит с классом «блок», присвоенный ему:

$(this).parent('.block').html(txt); 

Я пытаюсь целью каждого класса «блок» с вышеизложенным строка кода, но она не работает. Как я могу это сделать?

Обратите внимание, с этой линией «Слово» приращения независимо падает внутри «блок» метка:

var word = $(this).html(); 

$(document).ready(function() { 
 

 
    console.log("ready!"); 
 

 
    $('.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)) 
 
     console.log(l); 
 
    }); 
 

 
    (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; 
 
     $("div#d").html(txt); 
 

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

 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id=d></div> 
 

 
<div id="other_spans"> 
 
    <span class="block">First</span> 
 
    <span class="block">Second</span> 
 
    <span class="block">Third</span>

Answer 1

Вы можете перемещать Letter функцию и tbl переменную вне .each(), чтобы предотвратить переопределение функции, переменной на каждой итерации элементов; создать ссылку на $(this) текущий элемент, используйте ссылку внутри loop

$(document).ready(function() { 
 

 
    console.log("ready!"); 
 

 
    var tbl = " ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 
 

 
    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++; 
 
     } 
 
    } 
 
    }; 
 

 
    $(".block").each(function() { 
 
    // store reference to current `this` element 
 
    var elem = $(this); 
 
    var word = elem.html(); 
 
    console.log("Word: " + word); 
 
    var letters = []; 
 

 
    word.toUpperCase().split("") 
 
    .forEach(function(l) { 
 
     letters.push(new Letter(tbl, l, 2500)) 
 
     console.log(l); 
 
    }); 
 

 
    (function loop() { 
 
     var txt = "", 
 
     isDone = true; 
 
     letters.forEach(function(l) { 
 
     l.update(); 
 
     if (!l.done) isDone = false; 
 
     txt += l.table[l.current]; 
 
     }); 
 
     // `elem` : `this` element at `.each()` iteration 
 
     elem.html(txt); 
 

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

 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<div id="d"></div> 
 

 
<div id="other_spans"> 
 
    <span class="block">First</span> 
 
    <span class="block">Second</span> 
 
    <span class="block">Third</span>

Answer 2

В вашем коде это внутри IIFE является окном объект. Сохраните ссылку элемента с классом блока и используйте его внутри IIFE. Как ниже -

$(document).ready(function() { 

    console.log("ready!"); 
    var tbl = " ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 

    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++; 
      } 
     } 
    }; 


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

     var $this = $(this); 

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


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

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

      // output txt 
      //$("div#d").html(txt); 
      $this.html(txt); 

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

    }); 
}); 

Вот ссылка на рабочую скрипку https://jsfiddle.net/HectorBarbossa/tg9hpk4a/