使用 jQuery 使用类型书写文本效果更改图像

Question

我想在输入每一行后更改图像。该示例仅显示 2 行和 2 个图像，但会有很多行和图像。

行内容更改后，图像必须更改。

我该怎么办？

JSDiffle: https://jsfiddle.net/13ujowkL/

HTML

  <div class="output" id="output">

    <h1 class="cursor"></h1>

  </div>

  <div class="images">

    <img src="https://i.postimg.cc/4Y054xz3/video-1.jpg">

    <img src="https://i.postimg.cc/8jt43HcM/video-2.jpg">

  </div>

CSS

.cursor::after {

  content: ' ';

  display: inline-block;

  margin-left: 3px;

  background-color: #00b69d;

  animation-name: blink;

  animation-duration: 0.5s;

  animation-iteration-count: infinite;

}

h1.cursor::after {

  height: 24px;

  width: 13px;

}

p.cursor::after {

  height: 13px;

  width: 6px;

}

@keyframes blink {

  0% { opacity: 1; }

  49% { opacity: 1; }

  50% { opacity: 0; }

  100% { opacity: 0; }

}