javascript - 使用 Javascript 检查输入表单中的字符和字符顺序，以显示与字符和字符顺序匹配的图像

Question

我正在创建一个简单的系统，它将根据文本输入表单中找到的字母显示图像。例如，如果用户输入字母“p”，则显示id为#paris的图像。下面的示例有效并完成了目标的第一部分。

  <input id="words" name="email" class="userInput" type="text" /><span id="emailError"></span>
  <br>
  <br>
      <div id="Button" style="height:100px; width: 150px; background-color: #000;">
        </div>
<img id="paris" style="display:none" src="animsAll/paris.gif">

Jquery

$( "#words" ).keyup(function() {

if ($('#words').val().indexOf('p') > -1) {
    $('#paris').show();

}

});

但是，缺少一个关键要素。

当我添加更多图像时(将有 6 个图像可供选择)，系统需要根据用户输入单词的顺序显示这些图像。

意思是，如果用户输入“peter”，则对应于“p”的图像将显示几秒钟，然后隐藏，然后连接到“e”的图像将显示。 [隐藏和设置时间不是问题。]

我的问题实际上是关于对字符顺序进行排序，以便图像按照用户键入的顺序显示。系统如何理解每个字母的顺序，以便图像按照字母的顺序显示？

我理解已知字符串集中的 IndexOf，但在输入形式的情况下，可能性是无限的，如何对用户输入中找到的字符进行排序(在示例中，“P，e，t，e , r"这样系统就能正确显示图像的顺序？

<小时/>

[一天后:感谢您的回答和问题更新]

谢谢!!!现在我已经进一步解决了这个问题，我意识到我可能歪曲了我的问题。也许我应该问一个不同的问题。 我在这里真正做的是一种动画口型同步的形式。我已经创建了(动画) Angular 色，并且根据每个字母进行了相应的嘴部 Action 以实现口型同步。

虽然问题解决了这个问题，但我可能最好使用 Sprite 图像而不是单独的图像创建动画，而不是创建单独的图像。每帧有七个可能的变量。

<小时/>

[更新的问题]

现在发生的情况是，字母与图像匹配，同时显示。此外，图像出现的顺序对应于 html 上显示的顺序，而不是实际的用户输入。您可以看到下图所示的示例，其中我写了“Peter”，系统返回了四个单独的图像。除此之外，它还缺少第二个“e”图像。

谢谢大家的回答，我会对此做更多研究。我可以看到我需要走的方向。

[参见下图]

[HTML]

  <img id="heatherCatPaw1AI" style="display:none" src="img_chars/Heather_catPaw_1_A,I.svg">
  <img id="heatherCatPaw1E" style="display:none" src="img_chars/Heather_catPaw_1_E.svg">
  <img id="heatherCatPaw1MPB" style="display:none" src="img_chars/Heather_catPaw_1_M,P,B.svg">
  <img id="heatherCatPaw1O" style="display:none" src="img_chars/Heather_catPaw_1_O.svg">
  <img id="heatherCatPaw1TS" style="display:none" src="img_chars/Heather_catPaw_1_T,S,ELSE.svg">
  <img id="heatherCatPaw1UQ" style="display:none" src="img_chars/Heather_catPaw_1_U,Q.svg">
  <img id="heatherCatPaw1WR" style="display:none" src="img_chars/Heather_catPaw_1_W,R.svg">

[JAVASCRIPT]

$("#btn").click(function() {
  $.each($("#myinput").val().split(''), function(index, value) {
      if ($('#myinput').val().indexOf('a') > -1) {
        $('#heatherCatPaw1AI').show().delay(200).fadeOut();
      }

      if ($('#myinput').val().indexOf('i') > -1) {
        $('#heatherCatPaw1AI').show().delay(200).fadeOut();
      }

      if ($('#myinput').val().indexOf('e') > -1) {
      $('#heatherCatPaw1E').show().delay(200).fadeOut();
      }

      if ($('#myinput').val().indexOf('m') > -1) {
      $('#heatherCatPaw1MPB').show().delay(200).fadeOut();
      }

      if ($('#myinput').val().indexOf('p') > -1) {
      $('#heatherCatPaw1MPB').show().delay(200).fadeOut();
      }

      if ($('#myinput').val().indexOf('b') > -1) {
      $('#heatherCatPaw1MPB').show().delay(200).fadeOut();
      }

      if ($('#myinput').val().indexOf('o') > -1) {
      $('#heatherCatPaw1O').show().delay(200).fadeOut();
      }


      if ($('#myinput').val().indexOf('') > -1) {
      $('#heatherCatPaw1TS').show().delay(200).fadeOut();
      }

      if ($('#myinput').val().indexOf('s') > -1) {
      $('#heatherCatPaw1TS').show().delay(200).fadeOut();
      }

      if ($('#myinput').val().indexOf('u') > -1) {
      $('#heatherCatPaw1UQ').show().delay(200).fadeOut();
      }

      if ($('#myinput').val().indexOf('q') > -1) {
      $('#heatherCatPaw1UQ').show().delay(200).fadeOut();
      }

      if ($('#myinput').val().indexOf('w') > -1) {
      $('#heatherCatPaw1WR').show().delay(200).fadeOut();
      }
      if ($('#myinput').val().indexOf('r') > -1) {
      $('#heatherCatPaw1WR').show().delay(200).fadeOut();
      }

  });

Answer 1

使用 split 将字符串放入数组中，然后循环遍历它并执行您想要的操作。 (我可能会在 keyup 之外的其他东西上执行此操作，否则它会一直触发)

$("#btn").click(function() {
  $.each($("#myinput").val().split(''), function(index, value) {
    $('#myol').append('<li>' + value + '</li>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="myinput">
<button id="btn">
 click me
</button>

<ol id="myol">

</ol>