如何创建一个循环以查看是否正确填写了带有输入的所需行

Question

我的JSON是怎样的：

{
"main_object": {
"id": "5",
"getExerciseTitle": "TestFor",
"language": "nl_NL",
"application": "lettergrepen",
"main_object": {
  "title": "TestFor",
  "language": "nl_NL",
  "exercises": [
    {
      "word": "test",
      "syllables": [
        "test01",
        "test02",
        "test03",
        ""
      ]
    },
    {
      "word": "tesst",
      "syllables": [
        "test11",
        "test12",
        "",
        ""
      ]
    }
  ]
},
"dataType": "json"
}
}

我的功能如何：

function prepareCheck() {
 $.getJSON('json_files/jsonData_' + ID + '.json', function(json) {
              $(document).on('input', '.syl-input', function() {
var $wordContainer = $(this).closest('.exerciseWord'),
wordIndex = $('.exerciseWord').index($wordContainer);

var valuesArray = $wordContainer.find('.syl-input').map(function() {
return this.value
}).get()

  var syllablesArray = json.main_object.main_object.exercises[wordIndex].syllables;
console.log(syllablesArray);
  var isValid = valuesArray.every(function(val, i) {
 return syllablesArray[i] === val;
 });
$wordContainer.toggleClass('valid', isValid)
   });
 });
}
 });
 }

我想要实现的目标，但不知道如何：

我想创建一个循环，将通过每个所需的word的音节。 word“test”有3个syllables，在我的前端它显示3个输入字段，用于正确填写的所需word。然而，我怎么能循环通过我的syllables并创建所需的所有syllables所需的word，它应该使它们全部变成绿色按钮。当我正确填写syllables时，所需的syllables应该只变成绿色按钮。因此，对于我的第一个word，当我成功插入“test01”，“test02”，“test03”时，3个输入字段应该跳转到绿色按钮，而对于我的第二个word，当我正确地填充它们时，它应该将2个输入字段变为绿色按钮。然而，只要不正确地填写某个word的所有所需输入字段，它们应该保持输入字段。

Answer 1

以下使用Array#every()循环遍历与每个单词关联的输入值的数组，并匹配该单词的数据

还使用父词容器的jQuery index()来获取要比较的正确数据

$(document).on('input', '.syl', function() {
  var $wordContainer = $(this).closest('.word'),
    wordIndex = $('.word').index($wordContainer);
    
  var valuesArray = $wordContainer.find('.syl').map(function() {
    return this.value
  }).get()

  var syllablesArray = data.main_object.main_object.exercises[wordIndex].syllables

  var isValid = valuesArray.every(function(val, i) {
    return syllablesArray[i] === val;
  });

  $wordContainer.toggleClass('valid', isValid)
})

.word.valid .syl {
  background: yellow
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="word">
  <input class="syl" placeholder="Enter test01" /><br>
  <input class="syl" value="test02" /><br>
  <input class="syl" value="test03" />

</div>
<br>
<br>
<div class="word">
  <input class="syl" placeholder="Enter tesst11" /><br>
  <input class="syl" value="tesst12" />
</div>

<script>
  var data = {
    "main_object": {
      "id": "5",
      "getExerciseTitle": "TestFor",
      "language": "nl_NL",
      "application": "lettergrepen",
      "main_object": {
        "title": "TestFor",
        "language": "nl_NL",
        "exercises": [{
            "word": "test",
            "syllables": [
              "test01",
              "test02",
              "test03",
              ""
            ]
          },
          {
            "word": "tesst",
            "syllables": [
              "tesst11",
              "tesst12",
              "",
              ""
            ]
          }
        ]
      },
      "dataType": "json"
    }
  }
</script>