尝试访问动态生成的输入字段,并将其与长度一致的.json数据进行比较
Trying to access dynamically generated input fields and compare it to comforming length .json data
我正在编写一些代码,其中我通过一个符合.json文件中某些数据长度的for循环动态生成了html输入字段。我想这样做,当有人在输入字段中键入文本时,jquery将扫描输入字段等于其长度的特定.json类别,以比较两者是否匹配。这看起来很简单,但我遇到了一些问题。我基本上只是想通过循环访问动态创建的html,提取用户键入的任何内容,并将其与.json数据进行比较。如果有人有什么有用的想法,我将不胜感激。谢谢。
我的.js文件如下:
$.getJSON('rote.json', function(data){
var rand = data[Math.floor(Math.random() * data.length)];
var randCat = rand.cat;
var randMem = rand.members;
var randMemL = randMem.length;
$("h2").html(randCat);
var output = '';
for (var i=0;i<randMemL;i++){
output += '<input type="text" class="input" placeholder="write your tag here" /><br>';
}
$('.fields').html(output);
$('.input').keyup(function(){
//...what now?
});
});
});
我的.json文件如下:
[
{ "cat": "List all html tags that begin with the letter 'A'",
"members": [
"a",
"abbr",
"address",
"article",
"area",
"aside",
"audio"
]
},
{ "cat": "List all html tags that begin with the letter 'B'",
"members": [
"base",
"bdo",
"blockquote",
"body",
"br",
"base",
"base"
]
},
{ "cat": "List all html tags that begin with the letter 'C'",
"members": [
"canvas",
"caption",
"cite",
"col",
"colgroup",
"canvas"
]
},
{ "cat": "List all html tags that begin with the letter 'D'",
"members": [
"dd",
"del",
"div",
"dl",
"dt"
]
},
{ "cat": "List all html tags that begin with the letter 'E'",
"members": [
"em",
"embed"
]
},
{ "cat": "List all html tags that begin with the letter 'F'",
"members": [
"fieldset",
"figcaption",
"figure",
"footer",
"form"
]
},
{ "cat": "List all html tags that begin with the letter 'G'",
"members": [
]
},
{ "cat": "List all html tags that begin with the letter 'H'",
"members": [
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"head",
"header",
"hgroup",
"hr",
"html"
]
},
{ "cat": "List all html tags that begin with the letter 'I'",
"members": [
"i",
"iframe",
"img",
"input",
"ins"
]
},
{ "cat": "List all html tags that begin with the letter 'J'",
"members": [
]
},
{ "cat": "List all html tags that begin with the letter 'K'",
"members": [
"kbd"
]
},
{ "cat": "List all html tags that begin with the letter 'L'",
"members": [
"label",
"legend",
"li",
"link"
]
},
{ "cat": "List all html tags that begin with the letter 'M'",
"members": [
"map",
"mark",
"meta"
]
},
{ "cat": "List all html tags that begin with the letter 'N'",
"members": [
"nav",
"noscript"
]
},
{ "cat": "List all html tags that begin with the letter 'O'",
"members": [
"object",
"ol",
"optgroup",
"option"
]
},
{ "cat": "List all html tags that begin with the letter 'P'",
"members": [
"p",
"param",
"pre",
"progress"
]
},
{ "cat": "List all html tags that begin with the letter 'Q'",
"members": [
"q"
]
},
{ "cat": "List all html tags that begin with the letter 'R'",
"members": [
]
},
{ "cat": "List all html tags that begin with the letter 'S'",
"members": [
"s",
"samp",
"script",
"section",
"select",
"small",
"source",
"span",
"style",
"strong",
"sub",
"summary",
"sup"
]
},
{ "cat": "List all html tags that begin with the letter 'T'",
"members": [
"table",
"tbody",
"td",
"textarea",
"tfoot",
"th",
"thead",
"time",
"title",
"tr",
"track"
]
},
{ "cat": "List all html tags that begin with the letter 'U'",
"members": [
"u",
"ul"
]
},
{ "cat": "List all html tags that begin with the letter 'V'",
"members": [
"var",
"video"
]
},
{ "cat": "List all html tags that begin with the letter 'W'",
"members": [
]
},
{ "cat": "List all html tags that begin with the letter 'X'",
"members": [
]
},
{ "cat": "List all html tags that begin with the letter 'Y'",
"members": [
]
},
{ "cat": "List all html tags that begin with the letter 'Z'",
"members": [
]
}
]
HTML非常简单:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rote-App</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="rote.css"> -->
</head>
<body>
<div id="searcharea">
<h2></h2>
<div class="fields"></div>
</div>
<div id="update"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="rote.js"></script>
</body>
</html>
使用lodash,这可能是一个开始:
$('.input').keyup(function () {
var answer = this.value,
index = _.findIndex(randMem, function (tag) {
return answer == tag;
});
console.log(index);
});
我真的不明白你想做什么,但这里有一个解决方案。
更换环路
for (var i=0;i<randMemL;i++){
output = $('<input type="text" class="input" placeholder="write your tag here"/>');
output.data('tags', randMem);
$('.fields').append(output);
}
将此添加到事件
$('.input').keyup(function(){
var answer = $(this).val();
var tags = $(this).data('tags')
if(tags.indexOf(answer) != -1)
$(this).css('border-color','green');
else
$(this).css('border-color','red');
});
或者去拉小提琴!http://jsfiddle.net/66nrj3sy/
相关文章:
- 如何使用 node.js 比较两个 json 数组
- 通过JSON&比较时间
- 如何使用AngularJs比较两个对象的JSON
- 无法将 JSON 数组与 JavaScript 数组进行比较
- 比较 2 个 JSON 并在更新 json 时更改键值
- 在什么情况下,应该.deep.equal失败,但使用JSON.stringify进行比较工作正常
- 在angularJS中用字符串比较检查Json对象
- json与对象中的比较
- 将多个JSON响应与JMeter进行比较
- 无法将JavaScript变量与JSON数据进行比较
- 通过比较另外两个json对象来创建json对象
- JsRender:使用 if 语句将 JSON 对象中的值与外部变量进行比较
- 执行“JSON 类型”比较
- 如何将 int 与 int 模型 json 和 mvc 4 进行比较
- 比较来自输入 AngularJS 的两个 JSON 对象
- 比较两个JSON数组并重新排列新的JSON数组格式
- 谷歌比较图表使用JSON数据表返回[给定轴上的所有系列必须具有相同的数据类型]
- 在运行之前确定数据是否是新的(将数组与 JSON 进行比较)
- 如何通过在此 JSON 结果中进行比较来获取值
- 在 JS 中解析 JSON 并比较键值