Как реализовать многотипные элементы на одной странице с одной функцией

Question

Я пытаюсь сделать два div-ов (использующих stringElements) на странице, которые используют один и тот же класс в наборе . js, так что пока работает только первый случай .

Здесь, это возможно с 2 различными функциями с различным классом. но я хочу сделать это с помощью одной функции с одним и тем же классом.

Здесь показано, что я пытаюсь сделать. https://jsfiddle.net/xbofduaz/

Каков будет правильный путь для этого.

var typed1 = new Typed('.typed', {
  stringsElement: '.typed-strings',
  loop: true,
  typeSpeed: 50,
  backSpeed: 20,
  backDelay: 1700,
  showCursor: false,
});

HTML

<div class="wrap">
  <h1>TypedJS on multiple identical stringElements on the page</h1>

  <div class="typed-strings">
    <p>Ice cream</p>
    <p>Moog synth</p>
    <p>Holidays in space</p>
  </div>
  <span class="typed"></span>

  <p> Some other stuff on the page goes on, until we uncounter the exact same typed strings, that I also want to animate (and tarket thanks to a class). To note that both of these similar blocks come from the database, I'm unable to duplicate them to change their class or id, I need them to be exactly the same, and both be animated. </p>

  <div class="typed-strings">
    <p>Ice cream</p>
    <p>Moog synth</p>
    <p>Holidays in space</p>
  </div>
  <span class="typed"></span> </div>

Answer 1

Вы можете видеть, что document.querySelector() используется в методе загрузки из typedjs. Таким образом, несколько элементов не могут быть построены. Попробуйте использовать querySelectorAll()

document.querySelectorAll('.typed').forEach(function(el) {
    new Typed(el, {
    stringsElement: el.previousElementSibling,
    loop: true,
    typeSpeed: 50,
    backSpeed: 20,
    backDelay: 1700,
    showCursor: false,
  })
});

Рабочая демоверсия

https://jsfiddle.net/ebjzmLur/