尝试访问动态生成的输入字段,并将其与长度一致的.json数据进行比较

Trying to access dynamically generated input fields and compare it to comforming length .json data

本文关键字:json 比较 数据 动态 访问 输入 字段      更新时间:2023-09-26

我正在编写一些代码,其中我通过一个符合.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/