javascript - 为什么我的音节确实被取回了,但我的话却没有?
问题描述
所以,我能够以正确的方式获取我的音节,但不知何故我无法获取 my word
,但问题是:我获取 myword
的方式与我处理音节的方式完全相同。
function getExerciseBlock(i, data) {
var eBlock = $('<div/>',{
'id': i,
'class': 'col-md-6 eBlock well'
});
data = data || {
word: '',
syllables: ['','','','']
};
$(eBlock).append(
getRemoveBtnExercise(i),
getAudioBtn(i),
getWordInput(i, data.word),
getWordPartInput(i, data.syllables[0]),
getWordPartInput(i, data.syllables[1]),
getWordPartInput(i, data.syllables[2]),
getWordPartInput(i, data.syllables[3])
);
return eBlock;
}
将其取回的“循环”:
// Below this comment starts the fetching data back, so the moderator can change data
$(document).ready(function () {
$.getJSON('json_files/jsonData_' + ID + '.json', function(json) {
// Loops through the words and fetches them back to the CMS side.
var exercise = json.main_object.main_object.exercises;
exercise.forEach((exercise, index) => {
$('#my_form').append(getExerciseBlock(index, exercise));
console.log(exercise);
});
});
});
我的 JSON 如下所示:
{
"main_object": {
"id": "new",
"getExerciseTitle": "Example",
"language": "nl_NL",
"application": "lettergrepen",
"main_object": {
"title": "Example",
"language": "nl_NL",
"exercises": [{
"word": "Example",
"syllables": [
"Example1",
"Example2",
"",
""
]
}
]
},
"dataType": "json"
}
}
编辑:有人要求我提供这些功能:
getWordInput 是word
应该去的函数(当从我的 JSON 中取回时)
function getWordInput(id, cValue) {
cValue = cValue || '';
var wInput = $('<input/>', {
'class': 'exerciseGetWordInput_' + id + ' form-group form-control ExerciseGetWordInput word',
'type': 'text',
'name': 'question_takeAudio_exerciseWord['+ exerciseAudioInput +']',
'placeholder': 'Exercise',
'id': 'exerciseGetWordInput',
'required': true
});
return wInput;
}
getWordPartInput = 用于我的 JSON 文件中可以工作的音节。
// This is the function that creates the syllable inputs.
function getWordPartInput(id, cValue){
cValue = cValue || '';
var wpInput = $('<input/>', {
'class': 'form-group form-control syllable syl ' + TT ++,
'type': 'text',
'value': cValue,
'placeholder': 'Syllables',
'name': 'Syllablescounter['+ SyllablesID++ +']'
});
return wpInput;
}
要求的代码位,但对我来说看起来毫无用处:
function getAudioBtn(id, cValue){
cValue = cValue || '';
var audioBtn = $('<a/>', {
'class': 'sound btn btn-primary'
}).html('<i class="fa fa-volume-up"></i>');
return audioBtn;
}
function getRemoveBtnExercise(target, i){
var RemoveExerciseBtn = $('<a/>', {
'class': 'btn btn-danger'
}).on('click', function(){
console.log($('.eblock').prop('id'))
$('#' + target).remove();
}).html('<i class="fa fa-close"></i>');
return RemoveExerciseBtn;
}
下面的这段代码是一个添加按钮,单击时会创建eBlock
具有所有功能的按钮。例如,当主持人想要创建一个全新的练习时,将使用此按钮。
$(document).ready(function() {
var id = 0;
var addOpdracht = $('<a/>', {
'class': 'btn btn-success',
'id': 'addOpdracht'
}).on('click', function() {
$('#my_form').append(getExerciseBlock(id));
$(".exerciseGetWordInput_" + id).focus().select();
id++;
exerciseAudioInput++;
}).html('<i class="fa fa-plus fa-2x"></i>');
$('#my_form').append(addOpdracht);
$('#my_form').append(getExerciseTitle());
});
解决方案
您只是缺少'value': cValue,
功能getWordInput()
。编辑如下:
function getWordInput(id, cValue) {
cValue = cValue || '';
var wInput = $('<input/>', {
'class': 'exerciseGetWordInput_' + id + ' form-group form-control ExerciseGetWordInput word',
'type': 'text',
'value': cValue,
'name': 'question_takeAudio_exerciseWord['+ exerciseAudioInput +']',
'placeholder': 'Exercise',
'id': 'exerciseGetWordInput',
'required': true
});
return wInput;
}
推荐阅读
- ruby - 函数参数数量的问题
- java - “非法 base64 字符 3”,通过 TCP 连接发送整数(AES 加密字符串)
- javascript - REACT路由器:具有多个相同类型组件的路由组件
- javascript - 如何在使用 Vanilla javascript 单击按钮后为 html 输入框设置值并显示?
- .net - dotnet build - 对 2 个不同版本的 PackageReference
- ios - 使用 .onDelete -SwiftUI 时索引超出范围
- sql - 获取每个组的第一条和最后一条记录
- google-chrome - 如何检索检查元素中的隐藏元素 - Chrome 开发工具?
- python - Numpy Python 等效于 MATLAB corr
- raspberry-pi - 如何将 LOLIN 7 WS2812B LED 连接到 Raspberry Pi Pico (RP2040)?