Проблема: у меня есть поля ввода, которые должны быть зелеными, когда правильные syllables
были вставлены. Однако теперь возникает проблема: вход решает, правильно ли он основан на длине моего файла JSON. Поэтому, когда в моем массиве syllables
есть 2 слова, а не максимум 4, все равно требуется 2 раза «войти», пока не достигнет той же длины. как я могу это предотвратить?
Вот как выглядит один из моих файлов 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 createExercise(json) {
const exercises = json.main_object.main_object.exercises;
var exerciseArea = $('<div/>', {
id: 'exerciseField',
'class': 'col-md-12'
});
$.map(exercises, function (exercise, i) {
var exer = $('<div/>', {
'class': 'row form-group',
'id': +idRow++
})
var colLeft = $('<div/>', {
'class': 'col-md-3'
});
var row = $('<div/>', {
'class': 'row'
});
var audCol = $('<div>', {
class: 'col-md-3 audioButton'
}).append(getAudioForWords());
var wordCol = $('<div>', {
class: 'col-md-9 ExerciseWordFontSize exerciseWord',
'id': 'wordInput[' + ID123 + ']', // note to self: the brackets will need to be escaped in later DOM queries
text: exercise.word
});
row.append(audCol, wordCol);
colLeft.append(row);
var sylCol = $('<div>', {
class: 'col-md-9'
});
var sylRow = $('<div/>', {
class: 'row syll-row'
});
var correctSylls = [];
$.map(exercise.syllables, function (syllable, j) {
// Code to check if the syllable exists and is not an empty string
if(!syllable){
// If it doesn't exist or is an empty string, return early without creating/appending elements
return;
}
var innerSylCol = $('<div/>', {
class: 'col-md-3 inputSyllables'
});
var sylInput = $('<input/>', {
'type': 'text',
'class': 'form-control syl-input',
'name': +c++,
'id': +idsyll++
}).on('keyup', function() {
var cValue = $(this).val();
if (cValue === syllable) {
correctSylls.push(cValue);
console.log(correctSylls);
}
if (exercise.syllables.length === correctSylls.length) {
$(this).closest('.syll-row').find('input.syl-input').addClass('btn btn-success').removeClass('form-control');
}
});
innerSylCol.append(sylInput);
sylRow.append(innerSylCol);
});
idsyll = 0;
sylCol.append(sylRow);
exer.append(colLeft, sylCol);
exerciseArea.append(exer);
});
return exerciseArea;
}
Часть, вызывающая проблему:
var correctSylls = [];
$.map(exercise.syllables, function (syllable, j) {
// Code to check if the syllable exists and is not an empty string
if(!syllable){
// If it doesn't exist or is an empty string, return early without creating/appending elements
return;
}
var innerSylCol = $('<div/>', {
class: 'col-md-3 inputSyllables'
});
var sylInput = $('<input/>', {
'type': 'text',
'class': 'form-control syl-input',
'name': +c++,
'id': +idsyll++
}).on('keyup', function() {
var cValue = $(this).val();
if (cValue === syllable) {
correctSylls.push(cValue);
console.log(correctSylls);
}
if (exercise.syllables.length === correctSylls.length) {
$(this).closest('.syll-row').find('input.syl-input').addClass('btn btn-success').removeClass('form-control');
}
});
Взгляните на файл JSON, прежде чем вы посмотрите этот снимок / консоль. Вы, скорее всего, получите лучшую картину!
так как вы можете видеть, что поля ввода зеленые ... но не выполнены правильно. Он дублирует слово в моем syllables
массиве по какой-то нечетной причине, и я должен нажать enter для второго слова, чтобы массив заполнился 4 словами, прежде чем он превратит их в зеленые поля ввода.
Помощь была бы оценена. Благодарю.
Проблема: у меня есть поля ввода, которые должны быть зелеными, когда правильные syllables
были вставлены. Однако теперь возникает проблема: вход решает, правильно ли он основан на длине моего файла JSON. Поэтому, когда в моем массиве syllables
есть 2 слова, а не максимум 4, все равно требуется 2 раза «войти», пока не достигнет той же длины. как я могу это предотвратить?
Вот как выглядит один из моих файлов 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 createExercise(json) {
const exercises = json.main_object.main_object.exercises;
var exerciseArea = $('<div/>', {
id: 'exerciseField',
'class': 'col-md-12'
});
$.map(exercises, function (exercise, i) {
var exer = $('<div/>', {
'class': 'row form-group',
'id': +idRow++
})
var colLeft = $('<div/>', {
'class': 'col-md-3'
});
var row = $('<div/>', {
'class': 'row'
});
var audCol = $('<div>', {
class: 'col-md-3 audioButton'
}).append(getAudioForWords());
var wordCol = $('<div>', {
class: 'col-md-9 ExerciseWordFontSize exerciseWord',
'id': 'wordInput[' + ID123 + ']', // note to self: the brackets will need to be escaped in later DOM queries
text: exercise.word
});
row.append(audCol, wordCol);
colLeft.append(row);
var sylCol = $('<div>', {
class: 'col-md-9'
});
var sylRow = $('<div/>', {
class: 'row syll-row'
});
var correctSylls = [];
$.map(exercise.syllables, function (syllable, j) {
// Code to check if the syllable exists and is not an empty string
if(!syllable){
// If it doesn't exist or is an empty string, return early without creating/appending elements
return;
}
var innerSylCol = $('<div/>', {
class: 'col-md-3 inputSyllables'
});
var sylInput = $('<input/>', {
'type': 'text',
'class': 'form-control syl-input',
'name': +c++,
'id': +idsyll++
}).on('keyup', function() {
var cValue = $(this).val();
if (cValue === syllable) {
correctSylls.push(cValue);
console.log(correctSylls);
}
if (exercise.syllables.length === correctSylls.length) {
$(this).closest('.syll-row').find('input.syl-input').addClass('btn btn-success').removeClass('form-control');
}
});
innerSylCol.append(sylInput);
sylRow.append(innerSylCol);
});
idsyll = 0;
sylCol.append(sylRow);
exer.append(colLeft, sylCol);
exerciseArea.append(exer);
});
return exerciseArea;
}
Часть, вызывающая проблему:
var correctSylls = [];
$.map(exercise.syllables, function (syllable, j) {
// Code to check if the syllable exists and is not an empty string
if(!syllable){
// If it doesn't exist or is an empty string, return early without creating/appending elements
return;
}
var innerSylCol = $('<div/>', {
class: 'col-md-3 inputSyllables'
});
var sylInput = $('<input/>', {
'type': 'text',
'class': 'form-control syl-input',
'name': +c++,
'id': +idsyll++
}).on('keyup', function() {
var cValue = $(this).val();
if (cValue === syllable) {
correctSylls.push(cValue);
console.log(correctSylls);
}
if (exercise.syllables.length === correctSylls.length) {
$(this).closest('.syll-row').find('input.syl-input').addClass('btn btn-success').removeClass('form-control');
}
});
Взгляните на файл JSON, прежде чем вы посмотрите этот снимок / консоль. Вы, скорее всего, получите лучшую картину!
так как вы можете видеть, что поля ввода зеленые ... но не выполнены правильно. Он дублирует слово в моем syllables
массиве по какой-то нечетной причине, и я должен нажать enter для второго слова, чтобы массив заполнился 4 словами, прежде чем он превратит их в зеленые поля ввода.
Помощь была бы оценена. Благодарю.
00JavaScript, JQuery, JSON,