Question

我编写了一些代码，我通过一个符合.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>

Answer 1

使用lodash，这可能是一个开始：

$('.input').keyup(function () {

    var answer = this.value,
        index = _.findIndex(randMem, function (tag) {
            return answer == tag;
        });
    console.log(index);

});

Answer 2

我真的不明白你想做什么，但这是一个解决方案。

替换循环

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/

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

2 个答案: