Как использовать функцию автоматического набора текста несколько раз? (JavaScript)

Question

Добрый день, ладно.

У меня быстрый вопрос. Прежде чем я начну, мои знания о JavaScript не так уж велики.

Ниже приведена функция автоматического набора текста, которую я использую в JavaScript. Чтобы использовать его, мне нужно добавить два класса, «type- js» и «text- js» к элементу, который я хочу анимировать. Однако я хочу использовать его несколько раз на разных текстах. Потому что, когда я добавляю его к двум элементам, он записывает первый текст и использует его также и для второго текста.

Вот код:

function autoType(elementClass, typingSpeed){
  var thhis = $(elementClass);
  thhis.css({
    "position": "relative",
    "display": "inline-block"
  });
  thhis.prepend('<div class="cursor" style="right: initial; left:0;"></div>');
  thhis = thhis.find(".text-js");
  var text = thhis.text().trim().split('');
  var amntOfChars = text.length;
  var newString = "";
  thhis.text("|");
  setTimeout(function(){
    thhis.css("opacity",1);
    thhis.prev().removeAttr("style");
    thhis.text("");
    for(var i = 0; i < amntOfChars; i++){
      (function(i,char){
        setTimeout(function() {        
          newString += char;
          thhis.text(newString);
        },i*typingSpeed);
      })(i+1,text[i]);
    }
  },1500);
}

$(document).ready(function(){
  // Now to start autoTyping just call the autoType function with the 
  // class of outer div
  // The second paramter is the speed between each letter is typed.   
  autoType(".type-js",200);
});

Вот пример.

Как вы можете видеть в GIF выше. Я использую функцию автоматического набора текста два раза. В элементе ниже и в том, что показано в GIF. Но он записывает оба текста в переменную. Как я могу сделать его многократно используемым несколько раз, не записывая его в переменную и не показывая его на всех элементах? Я хочу это показать индивидуально. Как и в GIF выше, он должен показывать только «Сектор рынка», а в DIV намного ниже этого - просто «Компания». Не оба.

Мои извинения, если этот пост звучит бессмысленно. Я старался изо всех сил, чтобы разработать.

Спасибо! И хорошего дня.

Answer 1

Ваш селектор возвращает несколько элементов, если их более одного с классом type-js ...
Так что запустите код на each().
См. Пример.

function autoType(elementClass, typingSpeed){
  // Run on each item that has the class.
  $(elementClass).each(function(){
    var thhis = $(this);
    thhis.css({
      "position": "relative",
      "display": "inline-block"
    });
    thhis.prepend('<div class="cursor" style="right: initial; left:0;"></div>');
    thhis = thhis.find(".text-js");
    var text = thhis.text().trim().split('');
    var amntOfChars = text.length;
    var newString = "";
    thhis.text("|");
    setTimeout(function(){
      thhis.css("opacity",1);
      thhis.prev().removeAttr("style");
      thhis.text("");
      for(var i = 0; i < amntOfChars; i++){
        (function(i,char){
          setTimeout(function() {        
            newString += char;
            thhis.text(newString);
          },i*typingSpeed);
        })(i+1,text[i]);
      }
    },1500);
  })
}

$(document).ready(function(){
  // Now to start autoTyping just call the autoType function with the 
  // class of outer div
  // The second paramter is the speed between each letter is typed.   
  autoType(".type-js",200);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="type-js">
  <div class="text-js">
  testing
  </div>
</div>
<br/>
<div class="type-js">
  <div class="text-js">
  testing again
  </div>
</div>