Question

我正在创建一个简单的系统，它将根据文本输入表单中的字母显示图像。例如，如果用户输入字母＆＃34; p＆＃34;，则显示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个图像可供选择），系统需要根据用户输入单词的顺序显示这些图像。

含义，用户键入＆＃34; peter＆＃34;对应于＆＃34; p＆＃34;的图像将显示几秒然后隐藏，然后连接到＆＃34; e＆＃34;之后会显示。 [隐藏和设置时间不是问题。]

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

我理解已知字符串集合中的IndexOf，但在输入表单的情况下，可能性是无限的，我如何对用户输入中找到的字符进行排序（在示例中，＆＃34; P，e， t，e，r＆＃34;以便系统正确显示图像的顺序？

[一天之后：谢谢你回答＆amp;问题更新]

谢谢!!!既然我已经解决了这个问题，我意识到我可能误解了我的问题。也许我应该问一个不同的问题。 我真的在这里做的是一种动画唇形同步的形式。我创建了（动画）角色，每个字母都有相应的嘴部动作，用于唇形同步。

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

[更新的问题]

现在发生的事情是，字母与图像匹配，同时显示所有字母。此外，图像出现的顺序对应于html上显示的顺序，而不是实际的用户输入。你可以看到下面图片中显示的例子，我在那里写了＃34;彼得＆＃34;并且系统返回了四个单独的图像。它错过了第二个＆＃34; e＆＃34;图像，除此之外。

谢谢你们的答案我将对此进行更多的研究。我可以看到我需要去的方向。

[见下图]

[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将字符串放入数组中，然后遍历它并执行任何操作。（我可能会在除了键盘以外的其他东西上进行，或者它会一直开火）

$("#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>

使用Javascript检查输入表单中的字符和字符顺序，以显示符合字符和字符顺序的图像

1 个答案: