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

我正在尝试在页面上的两个div（使用stringElements）中共享typed.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>

最佳答案

您可以看到document.querySelector()在typedjs的load method中使用了。因此不能构造多个元素。尝试使用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/

关于javascript - 如何在单一页面中用单一功能实现多类型元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60987209/