如何用单一功能在单页中实现多类型元素

Question

我试图在页面上使用两个div(使用stringElements)，它们在typed.js中共享同一个类，到目前为止只有第一次出现的情况才能正常工作。

在这里，可以用两个不同的函数和不同的类。但是，我希望它具有同一个类的单个函数。

让你看看我想做什么。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()在载荷法 of 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/