Comment créer une boucle pour voir si la ligne désirée avec les entrées est remplie correctement

à quoi ressemble mon 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" } } 

à quoi ressemble ma fonction:

 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) }); }); } }); } 

Ce que j’essaie de réaliser, mais je ne sais pas comment:

Je voudrais créer une boucle qui passera par les syllabes pour chaque word désiré. word “test” a 3 syllables et sur mon interface il affiche 3 champs de saisie pour le word souhaité qui doit être rempli correctement. Cependant, comment puis-je parcourir mes syllables et créer cela lorsque toutes les syllables du word souhaité sont remplies, elles doivent toutes être transformées en boutons verts. Les syllables désirées ne doivent se transformer en boutons verts que lorsque je les remplis correctement. Donc, pour mon premier word les 3 champs de saisie doivent passer aux boutons verts lorsque j’insère avec succès “test01”, “test02”, “test03” et pour mon deuxième word il convient de transformer les 2 champs de saisie en boutons verts lorsque je les remplis correctement . Ils doivent cependant restr des champs de saisie tant que tous les champs de saisie désirés d’un word sont pas renseignés correctement.

• Verrouiller l’orientation du périphérique
• Compte à rebours Javascript / PHP qui met à jour toutes les secondes et compte à rebours à une date et une heure spécifiques
• sinon “mon système d’exploitation” change css – jquery
• La fonction de délai JQuery ne fonctionne pas
• Comment faire en sorte que ce curseur JQuery rende les diapositives correctement?

• Bouton jQuery next et prev
• Comment déclencher onbeforeunload avec le bouton Précédent dans une application basée sur ajax?
• élément dynamic nestedsortable ne pas s’effondrer
• Comment obtenir le bon SrNo dans Ajouter remove Clone With My Calculation
• top.frames ne fonctionnera pas en chrome

 $(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 }