使用Javascript检查输入表单中的字符和字符顺序，以显示符合字符顺序和字符顺序的图像
我正在创建一个简单的系统，它将根据文字输入表单中的字母显示图像。例如，如果用户输入字母"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，e，r“)，以便系统能够正确地显示图像的顺序？
一天后:谢谢您的回答和问题更新
谢谢！现在我已经进一步解决了这个问题，我意识到我可能歪曲了我的问题。也许我该问个不同的问题。我是真正的在这里做的，是一种动画唇同步的形式。我创建了(动画)角色，并根据唇同步的每个字母有相应的嘴运动。。
虽然这个问题解决了这个问题，但与其创建单独的图像，不如使用雪碧图像(而不是单独的images.There )创建动画，这是每帧可能的七个变量。
最新一期
现在发生的事情是，字母与图像匹配，同时显示所有图像。此外，图像显示的顺序与html上显示的顺序相对应，而不是实际的用户输入。您可以看到下面的图像中所示的示例，其中我写了"Peter“，系统返回了四个单独的图像。它缺少第二个"e“图像，在此之上。。
谢谢你们的回答，我会对此做更多的研究。我能看到我要去的方向。
见下面的图片
<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();
}
});回答 1
Stack Overflow用户
发布于 2018-03-10 01:56:25
使用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>
https://stackoverflow.com/questions/49204323
复制相似问题
腾讯云开发者
