正确输入的文本会更改图像
Correctly inputed text changes image
我一直在开发一个脚本,当用户输入正确的文本时,图像会更改字母,让用户知道他们输入正确。
此处预览:示例单词是"ate"。http://jsfiddle.net/wjx6b/2/
我确保它设置为使用检查索引
$.each(text, function(index, item)
我的问题是,当我尝试将其设置为日语"taberu"这样的外来词时,我必须在每个var文本框中都有两个字母,比如这个
var text = ['ta', 'be', 'ru'];
但当我把它设置为当我开始打字时什么都不会发生。感谢任何能提供帮助的人!
'typed'数组中的值被逐个访问,而在文本数组中,您将成对的字符作为一个值。因此,在这种情况下,您将一个字符与两个字符的字符串进行比较(将"ta"与"t"、"be"与"a"、"ru"与"b"进行比较。当然,这永远不会相等)。
要考虑到这一点,你必须考虑"步长"(即图像分组的字符数)。使用子字符串,您可以将大小为"步长"的键入文本块与文本数组中的值进行比较。
工作小提琴(你现在必须键入aattee而不是ate)
另一把小提琴,在这里你必须键入"taberu"
在这个fiddle步长是基于文本数组的第一项
这个fiddle动态检测步长,以防文本数组中的值没有相同的长度(感谢haynar的建议)
更新:这是最后一个例子的代码(谢谢Bob):
var text = ['ta', 'ber', 'u'];
var happy = ['http://www.vendian.org/howbig/UnstableURLs/letter_a_poster.png',
'http://chineseknotting.org/projects/knotty/T-carrick.jpg',
'http://etc.usf.edu/presentations/extras/letters/varsity_letters/38/17/E-400.png'
];
var grumpy = $('img').map(function(){ return this.src; }).get(); //gets the original images from the HTML
$("#test").on('keyup', function() {
var typed = this.value;
var textOffset = 0;
$.each(text, function(index, item) {
var stepsize = text[index].length;
if (typed.substring(textOffset, textOffset+stepsize) == text[index]) {
$('li', 'ul').eq(index).find('img').attr('src', happy[index]);
}else{
$('li', 'ul').eq(index).find('img').attr('src', grumpy[index]);
}
textOffset += stepsize;
});
});
这是适用于所有情况的Fiddle示例,不使用固定的元素大小,它取决于集合中每个元素的大小
var text = ['ta', 't', 'a', 'be', 'ru'];
var offset = 0;
var index = 0;
var happy = ['http://www.vendian.org/howbig/UnstableURLs/letter_a_poster.png',
'http://chineseknotting.org/projects/knotty/T-carrick.jpg',
'http://etc.usf.edu/presentations/extras/letters/varsity_letters/38/17/E-400.png',
'http://chineseknotting.org/projects/knotty/T-carrick.jpg',
'http://etc.usf.edu/presentations/extras/letters/varsity_letters/38/17/E-400.png'];
var grumpy = $('img').map(function(){ return this.src; }).get(); //gets the original images from the HTML
$("#test").on('keyup', function() {
var typed = this.value;
if (typed.substr(offset, text[index].length) == text[index]) {
$('li', 'ul').eq(index).find('img').attr('src', happy[index]);
offset += text[index].length;
index++;
}else{
$('li', 'ul').eq(index).find('img').attr('src', grumpy[index]);
}
});
我已经更新了脚本的逻辑,更新的版本可以在这里找到(由于内部服务器错误)
我喜欢的另一种选择是使用正则表达式。
从数组创建正则表达式:
var text = ['ta', 'ber', 'u'];
var regex = new RegExp('^' + $.map(text, function(val, i){ return '(.{'+val.length+'})?'; }).join(''),'i');
和匹配:
$("#test").on('keyup', function() {
matches = $(this).val().match(regex);
matches.shift();
$.each(text, function(index, val){
if(val == matches[index]){
$('li', 'ul').eq(index).find('img').attr('src', happy[index]);
}
else {
$('li', 'ul').eq(index).find('img').attr('src', grumpy[index]);
}
});
});
演示
相关文章:
- 将HTML表格导出到带有文本和图像的excel中
- 可单击滚动图像以显示文本框
- 正确输入的文本会更改图像
- 无法将包含文本和图像的SVG保存到画布
- 如何知道锚在文本或图像上
- 自动缩放图像以匹配文本高度
- 一个javascript实现base64图像编码并将结果写入文本文件
- 有人知道有没有jquery插件可以在图像上写文本,并让用户将其放置在图像内的任何位置
- jQuery对请求图像的外部文本进行查询
- 如何检测移动浏览器(PHP/Javascript),然后进行图像/文本更改
- ASP.NET网页-使用脚本显示由预定义日期和时间指定的图像/文本
- 合并 2 个 javascript/jquery 随机横幅图像/文本函数彼此对应
- 使用javascript在html中制作一个随机的图像/文本/url元素
- 将彩色带置于图像/标签+图像/文本对齐方式之上->JavaScript Titanium移动应用程序
- 将2D画布(图像+文本)应用于3D表面,并进行360度旋转/动画-可以使用HTML5/CSS3/Javascript或F
- 覆盖HTML 5输入类型文件,相机与图像/文本从HTML网页
- 脚本标记中的Paperclip图像集显示的是图像文本url,而不是图像-expandablebanners.js
- 图像文本上的代码后面
- 电子邮件中包含图像/文本/插图的HTML滑块
- 如何从不同的媒体子集创建视频,如图像/文本等