gpt4 book ai didi

javascript - 当用户输入正确的文本时,图像会翻转/更改

转载 作者:行者123 更新时间:2023-12-02 19:40:27 24 4
gpt4 key购买 nike

我正在设计一个语言学习网站。我希望当有人在文本框中输入文本时它会开始滚动某些图像。看看下面我的示例

http://imageshack.us/photo/my-images/827/hiraganaquiz2.jpg/

因此,当用户输入“na”时,第一个符号会突出显示,如您在我的示例中看到的那样。当他输入“ma”时,第二个符号应突出显示/翻转。我希望在输入正确的文本时所有符号都保持滚动状态。因此,如果用户输入“nama”,前两个符号应该滚动以表明他们得到了正确的结果,一旦输入最后一个正确的文本,所有三个符号都将滚动。

这可以完成吗?我会接受先进和简单的方法。

最佳答案

$(document).ready(function() {
var text = ['na', 'ma', 'ba'];

$("#elemID").on('keyup', function() {
var typed = this.value;
$.each(text, function(index, item) {
if (typed.indexOf(item)!=-1) {
$('li', 'ul').eq(index).find('img').addClass('correct');
}else{
$('li', 'ul').eq(index).find('img').removeClass('correct');
}
});
});
});

FIDDLE

编辑:

在页面顶部的 <head> 中部分,添加:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

然后将代码包装在 document.ready 中,请参阅上面编辑的代码了解如何执行此操作?

关于javascript - 当用户输入正确的文本时,图像会翻转/更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10452000/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com