각 클래스를 사용하여이 클래스에 액세스

Question

A부터 시작하여 대상 문자에 도달 할 때까지 주어진 단어의 각 문자를 증가시키는 코드가 있습니다. 아래의 코드 스 니펫에서 예제를 볼 수 있습니다. 이 코드는 단일 div id를 대상으로 할 때 작동하지만이 "block"클래스가 할당 된 모든 텍스트 블록에이 증가하는 텍스트 효과를 적용하도록 만들고 싶습니다.

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

나는 위의 각 "블록"클래스를 대상으로하는 것을 시도하고있다 :

$(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 */ } 
    })(); 

    }); 

}); 

나는 할당 된 "블록"클래스와 출력에 각 텍스트 비트 상에 증가 효과를 시도하고있다 코드 행은 작동하지 않습니다. 어떻게해야합니까? 다음은이 내 인생이 창

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

작업 바이올린에 대한 링크입니다; $(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 내부에서 사용하십시오. 아래처럼 -

$(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 */ } 
     })(); 

    }); 
}); 

여기에 당신은 요소의 각 반복에서 기능, 변수를 재정의 방지하기 위해 Letter 기능과 .each()의 tbl 변수 외부로 이동할 수 있습니다 https://jsfiddle.net/HectorBarbossa/tg9hpk4a/