使用 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" 这样系统才能正确显示图片的顺序？

---

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

谢谢！！！现在我已经进一步解决了这个问题，我意识到我可能歪曲了我的问题。也许我应该问一个不同的问题。 我真正在这里所做的是一种动画口型同步的形式。我创建了（动画）角色，并根据每个字母对口型进行了相应的嘴部动作。

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

---

[更新问题]

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